Hero Overlay

.hero-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  white-space: initial;
  display: flex;
  justify-content: center;

  &--gradient {
    background: linear-gradient(
      180deg,
      rgba(34, 34, 34, 0) 38.98%,
      rgba(34, 34, 34, 0.9) 100%
    );
    bottom: 0;
    content: '';
    display: block;
    height: 100%;
    top: 0;
    width: 100%;
  }

  &__content {
    z-index: 2;
    position: inherit;
    bottom: 7.8rem;
    width: 100%;
    text-transform: uppercase;
    max-width: 117.6rem;
    text-align: center;

    @media screen and (min-width: 820px) and (max-width: 920px) {
      bottom: 11.8rem;
    }

    @media (max-width: $mq-medium) {
      [data-behavior='hero-carousel-with-squad-selection'] & {
        bottom: 11.8rem;
      }
    }

    @media (min-width: $mq-medium) {
      [data-behavior='hero-carousel-with-squad-selection'] & {
        bottom: 18.2rem;
      }
    }
  }
  &__tag {
    background: $white;
    border-radius: 6rem;
    color: #1d1d1b;
    font-family: $text-font;
    letter-spacing: 0.5em;
    font-size: 1rem;
    line-height: 2.6rem;
    padding: 0.6rem 1.6rem;
    display: inline-block;
    width: auto;
    margin: 0 auto;
  }
  &__title {
    @extend .heading-1;

    font-size: 5.2rem;
    color: $white;
    margin-top: 1.2rem;
  }
  &__subtitle {
    @extend .p-1;

    font-size: 1.4rem;
    line-height: 2rem;
    color: $white;
    margin-top: 2rem;
  }
  .cta {
    margin: 2rem auto 0;

    svg {
      height: 2.4rem;
      margin-right: 1rem;
      width: 2.4rem;
    }
  }
  &.left-align {
    text-align: left;
    .hero-overlay__content {
      left: calc(50% - 58.8rem);
      text-align: left;
    }
    .cta {
      margin: 0;
    }
  }

  @media (max-width: 1024px) {
    &.left-align {
      .hero-overlay__content {
        padding: 1.6rem;
        left: 0;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__title {
      font-size: 9.6rem;
    }
  }
}

@media (max-width: $mq-small) {
  .hero-overlay {
    &__content {
      width: 34rem;
      left: calc(50% - 17rem);
      bottom: 5.8rem;
    }
    &.left-align {
      text-align: center;
      .hero-overlay__content {
        text-align: center;
        left: calc(50% - 17rem);
      }
    }
  }
}
.banner--xl {
  .hero-overlay {
    &__title {
      @extend .heading-hero-xl;
    }
  }
}
.banner--xxl {
  .hero-overlay {
    &__title {
      @extend .heading-hero-xxl;
    }
  }
}
:root [data-brand='womens'],
:root [data-brand='mens'] {
  .banner--h3 {
    .hero-overlay {
      &__title {
        font-size: 52px;
        line-height: 47px;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    .banner--h3 {
      .hero-overlay {
        &__title {
          font-size: 96px;
          line-height: 84px;
        }
      }
    }
  }
}
:root [data-brand='englandfootball-supplimentary'],
:root [data-brand='englandfootball'] {
  .banner--h3 {
    .hero-overlay {
      &__title {
        font-size: 42px;
        line-height: 40px;
      }
    }
  }

  @media screen and (min-width: $mq-small) {
    .banner--h3 {
      .hero-overlay {
        &__title {
          font-size: 78px;
          line-height: 68px;
        }
      }
    }
  }
}