.parallax-section-container {
  position: relative;
  width: 100%;
  height: 750px;
  overflow: hidden;
  view-timeline-name: --parallax;
}

.parallax-bg {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  z-index: 0;
  will-change: transform;
}

.parallax-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax-bg {
      animation: parallax-shift linear both;
      animation-timeline: --parallax;
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes parallax-shift {
  from { transform: translate3d(0, -14.2857%, 0); }
  to   { transform: translate3d(0, 14.2857%, 0); }
}

.parallax-section-text {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 35px;
  padding-right: 35px;
}

h3.parallax-content {
  font-size: 70px;
  color: white;
  font-weight: bold;
  max-width: 550px;
  line-height: 1.1em;
  padding-top: 200px;
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .parallax-section-container {
    height: auto;
    min-height: 400px;
  }
  .parallax-section-text {
    padding-left: 15px;
    padding-right: 15px;
  }
  h3.parallax-content {
    font-size: 40px;
    line-height: 1.3em;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 100px;
    padding-bottom: 80px;
  }
}