:root {
  --course-image-bg: #f4f8fa;
  --course-image-border: #d3e2e9;
  --course-image-radius: 1rem;
  --course-image-card-height: clamp(14rem, 27vw, 22rem);
  --course-image-hero-height: clamp(18rem, 38vw, 32rem);
}

/* Shared image treatment for every lesson and integrated review. */
#app img {
  max-width: 100%;
}

#app .page img {
  display: block;
  width: 100%;
  height: var(--course-image-card-height);
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: var(--course-image-bg);
}

#app .module img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
}

/* Keep every unit card aligned even when a title wraps onto a second line. */
#app .course-part .module-grid {
  align-items: stretch;
}

#app .course-part .module {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#app .course-part .module-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#app .course-part .module h3 {
  min-height: 2.4em;
  line-height: 1.2;
}

#app .course-part .module-content > p {
  min-height: 3em;
}

#app .page .lesson-head > .hero-image,
#app .page [class$="-hero"] > img,
#app .page [class$="-hero"] > figure > img,
#app .page .review-hero > img {
  display: block;
  width: 100%;
  height: var(--course-image-hero-height);
  object-fit: contain;
  object-position: center;
  border: 1px solid var(--course-image-border);
  border-radius: var(--course-image-radius);
  background: var(--course-image-bg);
}

#app .page figure > img,
#app .page [class$="-gallery"] img,
#app .page [class*="-image-grid"] img,
#app .page [class*="-image-pair"] img,
#app .page [class*="-visual-grid"] img,
#app .page [class*="-context-strip"] img,
#app .page [class*="-cockpit"] img,
#app .page .course-image-grid img {
  display: block;
  width: 100%;
  height: var(--course-image-card-height);
  max-height: none;
  object-fit: contain;
  object-position: center;
  background: var(--course-image-bg);
}

#app .page figure {
  min-width: 0;
}

@media (max-width: 900px) {
  :root {
    --course-image-card-height: clamp(13rem, 42vw, 21rem);
    --course-image-hero-height: clamp(17rem, 54vw, 28rem);
  }
}

@media (max-width: 600px) {
  :root {
    --course-image-card-height: clamp(12rem, 72vw, 20rem);
    --course-image-hero-height: clamp(15rem, 78vw, 24rem);
  }

  #app .page figure > img,
  #app .page [class$="-gallery"] img,
  #app .page [class*="-image-grid"] img,
  #app .page [class*="-image-pair"] img,
  #app .page [class*="-visual-grid"] img,
  #app .page [class*="-context-strip"] img,
  #app .page [class*="-cockpit"] img,
  #app .page .course-image-grid img {
    height: var(--course-image-card-height);
  }
}