.banner {
  grid-row: header-start / header-end;
  width: 100vw;
  display: grid;
  justify-items: center;
  align-content: center;
  background: linear-gradient(to right bottom, rgba(13, 35, 55, 0.99), rgba(23, 45, 65, 0.8));

  @media only screen and (max-width: $bp-mobile-l) {
    width: auto;
  }

  &__content {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1rem 0;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
  }

  &__image {
    z-index: -1;
    transform: translate3d(0.00001px, 0px, -1px) !important; // needed this to prevent Safari from displaying picture on top of text. Causes picture to disappear, but it's better than having the picture obscure the entire header.
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    position: absolute;
  }

  &__main {
    transform: translateY(-3.5rem);
    margin-bottom: 2.4rem;
    font-size: 6.2rem;
    text-align: center;
    letter-spacing: 3.5rem;
    color: $grey-2;

    @media only screen and (max-width: $bp-laptop) {
      font-size: 4rem;
      letter-spacing: 3rem;
    }
    @media only screen and (max-width: $bp-tablet) {
      font-size: 3rem;
      margin-bottom: 0;
    }
    @media only screen and (max-width: $bp-mobile-l) {
      font-size: 2rem;
      letter-spacing: 2.5rem;
    }

    &--part-1 {
      @media only screen and (max-width: $bp-tablet) {
        display: block;
        padding-bottom: 1.5rem;
        letter-spacing: 5.3rem;
        transform: translateX(1.4rem);
      }
      @media only screen and (max-width: $bp-mobile-l) {
        letter-spacing: 3.5rem;
        transform: translateX(1.1rem);
      }
    }
    &--part-2 {
      @media only screen and (max-width: $bp-tablet) {
        display: block;
        padding-bottom: 1.5rem;
      }
    }
  }

  &__sub {
    margin-bottom: 5.2rem;
    font-size: $sub-header-font-size;
    text-align: center;
    letter-spacing: 1rem;
    color: $grey-2;

    @media only screen and (max-width: $bp-tablet) {
      margin-bottom: 0rem;
      font-size: 1.6rem;
      transform: translateY(-3rem);
    }

    &--part-1 {
      @media only screen and (max-width: $bp-tablet) {
        display: block;
        padding: 1rem;
      }
    }

    &--part-2 {
      @media only screen and (max-width: $bp-tablet) {
        display: block;
        padding: 1rem;
        letter-spacing: 1.2rem;
      }
    }
  }
}