/* The collage's white field is part of the source image. Mask its geometric
   background only in dark mode, preserving the original photographs and facets.
   Match mask sizing/position to the existing image's object-fit at each layout. */
html[data-theme="dark"] .dev1-home-editorial-sections > #dev1-home-courses {
  background: #0e1217;
}

html[data-theme="dark"] .dev1-home-editorial-sections > #dev1-home-courses
  .home-v2-editorial-courses-promo-media::after {
  display: none;
}

html[data-theme="dark"] .dev1-home-editorial-sections > #dev1-home-courses
  .home-v2-editorial-courses-promo-media img {
  -webkit-mask-image: url("/assets/courses-collage-mask-v1.svg");
  mask-image: url("/assets/courses-collage-mask-v1.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

html[data-theme="dark"] .dev1-home-editorial-sections > #dev1-home-courses h2 {
  color: #f2f5f4;
}

html[data-theme="dark"] .dev1-home-editorial-sections > #dev1-home-courses
  .home-v2-editorial-courses-promo-copy > p {
  color: #aab5c3;
}

html[data-theme="dark"] .dev1-home-editorial-sections > #dev1-home-courses
  .home-v2-editorial-kicker {
  color: #8bd4ad;
}

html[data-theme="dark"] .dev1-home-editorial-sections > #dev1-home-courses
  .home-v2-editorial-courses-audiences span {
  color: #8bd4ad;
  background: #17251f;
}

@media (min-width: 761px) {
  html[data-theme="dark"] .dev1-home-editorial-sections > #dev1-home-courses
    .home-v2-editorial-courses-promo-media img {
    -webkit-mask-position: center;
    mask-position: center;
  }
}