.sticky-steps {
  min-height: 100dvh;
  position: relative;
  overflow: clip;
}

.sticky-steps__container {
  /* max-width via .inner-width class */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.sticky-steps__collection {
  min-height: 100dvh;
  display: flex;
  position: relative;
  width: 100%;
}

.sticky-steps__list {
  gap: 30dvh;
  flex-flow: column;
  flex: 1;
  min-width: 0;
  padding-top: calc(50dvh - 7.5em);
  padding-bottom: calc(50dvh - 7.5em);
  display: flex;
}

.sticky-steps__text {
  gap: 1.5em;
  flex-flow: column;
  width: 50%;
  padding-right: 6em;
  display: flex;
}

/* Eyebrow + H2 grouped tightly as one visual headline unit */
.sticky-steps__heading {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sticky-steps__eyebrow {
  /* font-size via text-7xl, font-weight via font-black (tailwind) */
  letter-spacing: -.03em;
}

.sticky-steps__h2 {
  margin-top: 0;
  margin-bottom: 0;
  /* font-size via text-7xl, font-weight via font-black (tailwind) */
  letter-spacing: -.03em;
}

.sticky-steps__p {
  margin-bottom: 0;
  /* font-size + line-height via text-lg (tailwind) */
}

.sticky-steps__media {
  width: 50%;
  height: 100%;
  padding-left: 3em;
  position: absolute;
  top: 0;
  right: 0;
}

.sticky-steps__sticky {
  align-items: center;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  position: sticky;
  top: 0;
}

.sticky-steps__visual {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.sticky-steps__visual img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 992px) {
  [data-sticky-steps-item-status] .sticky-steps__visual {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    opacity: 0;
    visibility: hidden;
  }

  [data-sticky-steps-item-status="before"] .sticky-steps__visual,
  [data-sticky-steps-item-status="active"] .sticky-steps__visual {
    opacity: 1;
    visibility: visible;
  }

  [data-sticky-steps-item-status] .sticky-steps__text {
    transition: opacity 0.5s ease-in-out;
    opacity: 0.25;
  }

  [data-sticky-steps-item-status="active"] .sticky-steps__text {
    opacity: 1;
  }
}

@media screen and (max-width: 991px) {
  .sticky-steps__list {
    gap: 7.5em;
    padding-top: 10em;
    padding-bottom: 10em;
  }

  .sticky-steps__text {
    width: 100%;
    padding-right: 0;
  }

  .sticky-steps__sticky {
    min-height: auto;
    position: relative;
    top: auto;
  }

  .sticky-steps__media {
    width: 100%;
    height: auto;
    padding-left: 0;
    margin-top: 2rem;
    position: relative;
    top: auto;
    right: auto;
  }
}

/* font-size auf mobile via tailwind-overwrites.css (text-7xl → 2.5rem) */