html {
  scroll-behavior: smooth;
}
.bg {
  background: #9b3636;
  position: sticky;
  top: 0;
  left: 0;
  width: 50%;
  height: 0;
}

.section {
  display: flex;
  min-height: 100vh;
  position: relative;
}

.section > * {
  width: 50%;
}

@media (max-width: 1279px) {
  .section > * {
    width: 100%;
  }
}

.section-img {
  position: relative;
  display: flex;
}

.section-img-inner {
  height: 100vh;
  position: fixed;
  left: 0%;
  width: 50%;
  top: 0;
  mix-blend-mode: multiply;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  filter: blur(30px);
  opacity: 0;
  background-position: 50% 40%;
  transition:
    0.6s ease,
    opacity 0.6s ease,
    background-position 0.8s ease;
}

@media (max-width: 1279px) {
  .section-img-inner {
    position: relative;
    width: 100%;
    height: 300px; /* Fixed height for image on mobile */
    opacity: 1; /* Always visible or controlled by active? Let's keep opacity logic if possible, but 1 is safer for simple scroll */
    filter: none;
  }
}
.section-img-inner h1 {
  color: white;
  text-align: center;
}

.section-body {
  display: flex;
  align-items: center;
}

.section-text {
  padding: 5vw;
}

.section.active .section-img-inner {
  opacity: 1;
  background-position: 50% 50%;
  filter: blur(0);
}

h2 {
  font-size: 3vw;
  margin-bottom: 0.5em;
  margin-top: 0;
}
.image-title h2 {
  background-color: #ebebebeb;
}
.vertical-carousel.right-side .section-img-inner {
  left: auto;
}