@import "../../helpers";
.sf-hero-item {
  display: flex;
  justify-content: flex-start;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  color: var(--c-text);
  background-repeat: no-repeat;
  background-size: cover;
  img {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
  }
  &__wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-height: 14rem;
    padding: var(--spacer-sm);
    text-decoration: none;
    &.sf-button,
    &.sf-button:hover,
    &.sf-button:active,
    &.sf-link {
      --button-background: transparent;
      --button-box-shadow-opacity: 0;
      --button-wrap: normal;
      text-align: left;
    }
  }
  &__subtitle {
    margin: 0;
    color: var(--c-gray);
    width: 60%;
    @include font(
      --hero-item-subtitle-font,
      var(--font-weight--normal),
      var(--h6-font-size),
      1.4,
      var(--font-family--secondary)
    );
    text-transform: uppercase;
  }
  &__title {
    margin: var(--spacer-xs) 0 0 0;
    color: var(--c-text);
    width: 60%;
    @include font(
      --hero-item-title-font,
      var(--font-weight--semibold),
      var(--h2-font-size),
      1.2,
      var(--font-family--secondary)
    );
    letter-spacing: 0.1px;
    text-transform: none;
  }
  &__button {
    display: none;
  }
  &--align-right {
    justify-content: flex-end;
  }
  &--position-bg-top-right {
    background-position: top right;
  }
  &--position-bg-bottom-right {
    background-position: bottom right;
  }
  &--position-bg-bottom-left {
    background-position: bottom left;
  }
  @include for-desktop {
    &__wrapper {
      width: 50%;
      min-height: 36.625rem;
      padding: var(--spacer-2xl);
    }
    &__subtitle {
      width: 100%;
    }
    &__title {
      --hero-item-font-size: var(--h1-font-size);
      width: 100%;
      margin: var(--spacer-base) 0 var(--spacer-lg) 0;
    }
    &__button {
      display: block;
    }
  }
}
.sf-hero {
  position: relative;
  &__control--left, &__control--right {
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    display: none;
    padding: 0 var(--spacer-sm);
  }
  &__control--right {
    right: 0;
  }
  &__bullets {
    position: absolute;
    bottom: var(--spacer-xl);
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    display: none;
  }
  .glide {
    &__slides {
      margin: 0;
    }
  }
  @include for-desktop {
    &__control--left, &__control--right {
      display: block;
    }
    &__bullets {
      display: flex;
    }
  }
}