.dai-expertise-features {
  --dai-expertise-gutter: 40px;
  --dai-expertise-media-width: 42%;
  --dai-expertise-media-height: 78vh;
  --dai-expertise-sticky-top: 40px;
  --dai-expertise-min-height: 75vh;
  --dai-expertise-section-gap: 96px;
  --dai-expertise-active-opacity: 1;
  --dai-expertise-inactive-opacity: 0.45;
  position: relative;
  margin-inline: auto;
  z-index: 0;
}

.dai-expertise-features__list {
  position: relative;
}

.dai-expertise-features__item {
  min-height: var(--dai-expertise-min-height);
}

.dai-expertise-features__item + .dai-expertise-features__item {
  margin-top: var(--dai-expertise-section-gap);
}

.dai-expertise-features__media-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--dai-expertise-media-width);
  min-width: 260px;
  z-index: 1;
}

.dai-expertise-features__media-inner {
  position: sticky;
  top: var(--dai-expertise-sticky-top);
  height: var(--dai-expertise-media-height);
  margin: 0;
}

.dai-expertise-features__media-layer {
  position: absolute;
  inset: 0;
  opacity: var(--dai-expertise-inactive-opacity);
  overflow: hidden;
}

.dai-expertise-features__item.is-in-view .dai-expertise-features__media-layer {
  opacity: var(--dai-expertise-active-opacity);
}

.dai-expertise-features__media-layer img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.dai-expertise-features__content {
  min-height: var(--dai-expertise-min-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: calc(
    var(--dai-expertise-media-width) + var(--dai-expertise-gutter)
  );
}

.dai-expertise-features__title,
.dai-expertise-features__content-body {
  opacity: 0.9;
  transform: translateY(6px);
  transition:
    opacity 280ms ease,
    transform 280ms ease;
}

.dai-expertise-features__item.is-in-view .dai-expertise-features__title,
.dai-expertise-features__item.is-in-view .dai-expertise-features__content-body {
  opacity: 1;
  transform: translateY(0);
}

.dai-expertise-features__title,
.dai-expertise-features__content-body {
  margin-top: 0;
}

.dai-expertise-features__content-body > :first-child {
  margin-top: 0;
}

.dai-expertise-features__content-body > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .dai-expertise-features__item,
  .dai-expertise-features__content {
    min-height: 0;
  }

  .dai-expertise-features__item {
    display: flex;
    flex-direction: column;
  }

  .dai-expertise-features__media-wrap {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    height: min(60vh, 540px);
    margin-bottom: 24px;
  }

  .dai-expertise-features__media-inner {
    position: relative;
    top: 0;
    height: 100%;
  }

  .dai-expertise-features__content {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dai-expertise-features__title,
  .dai-expertise-features__content-body,
  .dai-expertise-features__media-layer {
    transition: none;
  }
}