.mesa-home-banner {
  position: relative;
  color: white;
}

/* Force full screen width */
.mesa-home-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.mesa-banner__content {
  height: 100%;
  width: 100%;
  padding: 0 var(--gutter-padding);
  padding-top: 152px;
  padding-bottom: 133px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-color: #000;
}

.mesa-banner__content-wrapper {
  width: 100%;
  max-width: 1525px;
  margin: 0 auto;
}

.mesa-banner__text h1 {
  color: white;
}

.mesa-banner__text p {
  font-size: 20px;
}

.mesa-banner__text p:last-child {
  margin: 0;
}

.mesa-banner__links {
  flex-direction: column;
  align-items: center;
}

.mesa-banner__cta {
  width: fit-content;
  padding: 20px 67px;
  margin: 0;
  border-color: var(--color-plum);
  background-color: var(--color-plum);
  line-height: var(--font-size-6);
  font-size: var(--font-size-6);
  color: white;
}

@media (min-width: 992px) {
  .mesa-banner__text {
    max-width: 853px;
  }
  .mesa-banner__text p {
    line-height: 34px;
    font-size: 24px;
  }
  .mesa-banner__links {
    flex-direction: row;
    gap: 19px;
  }
}

@media (max-width: 991px) {
  .mesa-banner__content {
    padding-left: var(--gutter-padding);
    padding-right: var(--gutter-padding);
  }
}

/* transparent bg option selected */
.mesa-banner__bg-transparent .mesa-banner__content {
  background-color: transparent;
}
.mesa-banner__bg-transparent .mesa-banner__bg-lines {
  display: none;
}
@media (min-width: 992px) {
  .mesa-banner__bg-transparent .mesa-banner__content {
    position: relative;
    overflow: hidden;
  }
  .mesa-banner__bg-transparent .mesa-banner__bg-lines {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    width: auto;
    pointer-events: none;
  }

  .mesa-banner__bg-transparent .mesa-banner__bg-lines #b stop {
    stop-color: var(--color-blue-chill);
  }

  .mesa-banner__bg-transparent .mesa-banner__content #line-1,
  .mesa-banner__bg-transparent .mesa-banner__content #line-2,
  .mesa-banner__bg-transparent .mesa-banner__content #line-3,
  .mesa-banner__bg-transparent .mesa-banner__content #line-4 {
    opacity: 0.1;
  }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes animLine2 {
      from {
        transform: matrix(.90630779, .42261826, -.42261826, .90630779, 7856.868, -132.517);
        opacity: 0.1;
      }
      to {
        transform: matrix(.90630779, .42261826, -.42261826, .90630779, 7906.868, -132.517);
        opacity: 0.04;
      }
    }
    @keyframes animLine3 {
      from {
        transform: matrix(.90630779, .42261826, -.42261826, .90630779, 8030.997, -132.517);
        opacity: 0.1;
      }
      to {
        transform: matrix(.90630779, .42261826, -.42261826, .90630779, 8000.997, -132.517);
        opacity: 0.04;
      }
    }
    @keyframes animLine4 {
      from {
        transform: matrix(-.90630779, .42261826, -.42261826, -.90630779, 8554, 884.478);
        opacity: 0.05;
      }
      to {
        transform: matrix(-.90630779, .42261826, -.42261826, -.90630779, 8504, 884.4787);
        opacity: 0.1;
      }
    }
    .mesa-banner__bg-transparent .mesa-banner__content #line-2,
    .mesa-banner__bg-transparent .mesa-banner__content #line-3,
    .mesa-banner__bg-transparent .mesa-banner__content #line-4 {
      animation: 10s ease-in-out infinite alternate animLine2;
    }
    .mesa-banner__bg-transparent .mesa-banner__content #line-3 {
      animation-name: animLine3;
    }
    .mesa-banner__bg-transparent .mesa-banner__content #line-4 {
      animation-name: animLine4;
    }
  }
  .mesa-banner__bg-transparent .mesa-banner__content > .mesa-banner__text ,
  .mesa-banner__bg-transparent .mesa-banner__content > .mesa-banner__links {
    position: relative;
  }
}