.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;      }    }  }}