.benefits-scroller__wrapper,
.benefits-scroller__wrapper * {
  box-sizing: border-box;
}

.benefits-scroller__headline {
  align-items: center;
  background-color: #ffffff;
  display: flex;
  height: 25vh;
  justify-content: center;
  padding-top: calc(2rem + 80px); /* Offset header */
  position: sticky;
  top: 0;
  z-index: 1;
}

/*.benefits-scroller__headline:after {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  content: '';
  height: 5rem;
  position: absolute;
  top: 100%;
  width: 100%;
}*/

.benefits-scroller__headline.not-sticky {
  position: relative;
}

.benefits-scroller__headline-content {
  margin: 0 auto;
  max-width: 972px; /* Fields */
}

/* Scroller */

.benefits-scroller {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1240px; /* Fields */
}

/* Column: Dots */

.benefits-scroller__dots-col {
  align-items: center;
  display: flex;
  height: 75vh;
  position: sticky;
  top: 25vh;
  width: 8.33333333333%;
}

.benefits-scroller__dots {}

.benefits-scroller__dot {
  background-color: #C4CFDF; /* Fields */
  border-radius: 2.5px;
  height: 5px;
  margin: 0.75rem 0;
  transition: background-color 0.25s, height 0.25s;
  width: 5px;
}

.benefits-scroller__dot.is-active {
  background-color: #6878FF; /* Fields */
  border-radius: 2.5px;
  height: 20px;
}

/* Column: Content */

.benefits-scroller__content-col {
  height: 75vh;
  width: 50%;
}

.benefits-scroller__content-wrapper {
  align-items: center;
  display: flex;
  height: 75vh;
  position: static;
  width: 100%;
}

.benefits-scroller__content {
  padding-right: 5rem;
}

.benefits-scroller__image--sm {
  display: none;
  opacity: 0;
  visibility: hidden;
}

.benefits-scroller__subtitle {
  margin: 0 0 2rem 0;
}

.benefits-scroller__description {
  margin-bottom: 2rem;
}

.benefits-scroller__description *:first-child {
  margin-top: 0;
}

.benefits-scroller__description *:last-child {
  margin-bottom: 0;
}

/* Column: Image */

.benefits-scroller__image-col {
  height: 75vh;
  position: sticky;
  top: 25vh;
  width: 41.6666666667%;
}

.benefits-scroller__image-wrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  width: 100%;
}

.benefits-scroller__image-wrapper.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.benefits-scroller__image {
  aspect-ratio: 496 / 335;
  border-radius: 0.625rem;
  max-width: 496px; /* Temp */
  overflow: hidden;
  width: 100%;
}

@supports not (aspect-ratio) { 
  .benefits-scroller__image {
    height: 0;
    overflow: hidden;
    padding-top: 67.5%;
    position: relative;
  }

  .benefits-scroller__image img {
    left: 0;
    position: absolute;
    top: 0;
  }
}

.benefits-scroller__image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 767px) {
  .benefits-scroller__wrapper {
    padding: 5rem 1rem; /* Fields */
  }

  .benefits-scroller__headline {
    height: initial;
    position: relative;
    padding: 0 0 2rem 0;
  }

  .benefits-scroller__headline:after {
    display: none;
  }
  
  .benefits-scroller {
    flex-direction: column;
    height: initial !important;
  }
  
  .benefits-scroller__dots-col {
    display: none;
  }
  
  .benefits-scroller__content-col {
    height: initial;
    width: 100%;
  }
  
  .benefits-scroller__content-wrapper {
    height: initial;
    padding: 2.5rem 0;
  }

  .benefits-scroller__content {
    padding-right: 0;
  }

  .benefits-scroller__image {
    max-width: none;
  }
  
  .benefits-scroller__image--sm {
    display: block;
    margin-bottom: 2rem;
    opacity: 1;
    visibility: visible;
  }
  
  .benefits-scroller__image-col {
    display: none;
  }
}