Efl Bundle Hero Banner: In Progress

.efl-bundle-hero-banner {
  &__wrapper {
    position: relative;
    .index-image {
      width: 100%;
      object-fit: cover;
      height: 62rem;
    }
  }

  &__overlay {
    max-width: 103.2rem;
    width: 100%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    &--wrapper {
      position: absolute;
      bottom: 0;
      margin: 5rem 2.7rem 24.6rem 2.7rem;
      img {
        width: 12.6rem;
        margin: 0 auto;
      }
      h1 {
        @extend .efl-heading-2;

        font-size: 4.4rem;
        line-height: 4.4rem;
        color: $white;
        text-align: center;
        margin-top: 0.9rem;
        text-transform: capitalize;
      }
      .efl-bundle-hero-banner-copy {
        @extend .efl-p-medium;

        max-width: 42.3rem;
        color: $light-blue;
        text-align: center;
        letter-spacing: 0.02em;
        margin: 0.8rem auto 0;
      }
    }
  }

  &--time-quiz {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.2rem;
    .time {
      @extend .efl-p-small;

      display: flex;
      justify-content: center;
      align-items: center;
      color: $white;
      letter-spacing: -0.01em;
      text-transform: capitalize;
      &::before {
        content: '';
        background-image: url('/assets/example-content/bundle-hero/time.svg');
        width: 2rem;
        height: 2.3rem;
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
        margin-right: 0.8rem;
      }
      &::after {
        content: '';
        width: 0.1rem;
        height: 1.9rem;
        background-color: $light-blue;
        margin: 0 1.6rem;
      }
    }

    .quiz {
      @extend .efl-p-small;

      display: flex;
      justify-content: center;
      align-items: center;
      color: $white;
      letter-spacing: -0.01em;
      text-transform: capitalize;
      &::before {
        content: '';
        background-image: url('/assets/example-content/bundle-hero/quiz.svg');
        width: 2rem;
        height: 2.2rem;
        background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
        margin-right: 0.8rem;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__wrapper {
      .index-image {
        height: 52rem;
      }
    }

    &__overlay {
      &--wrapper {
        margin: 7.5rem 0 10.7rem 0;
        img {
          width: 14rem;
        }
        h1 {
          font-size: 5.2rem;
          line-height: 5.8rem;
        }
      }
    }

    &--time-quiz {
      margin-top: 2rem;
    }
  }

  @media only screen and (min-width: $mq-small) and (max-width: $mq-medium) {
    &__wrapper {
      .index-image {
        object-position: bottom;
      }
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 819px) {
    &__overlay {
      &--wrapper {
        max-width: 32.2rem;
      }
    }
  }
}