/* Sonke Design V20 — natural documentation ratios and replaceable homepage media. */

/* Documentation is displayed at its native aspect ratio; no part is cropped. */
.case-page .case-v11-stage--document {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-height: none;
  aspect-ratio: auto;
  overflow: visible;
  padding: clamp(10px, 1.4vw, 18px);
  background: #fff;
  border: 1px solid rgba(33, 31, 28, 0.1);
}

.case-page .case-v11-stage--document img,
.case-page .case-v11-card--lead .case-v11-stage--document img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none !important;
}

.lightbox.is-light-media img {
  width: auto;
  height: auto;
  object-fit: contain;
}

/* One large, uncropped image in the black homepage developer section. */
.developer-visual.developer-visual--v20 {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: auto;
  isolation: isolate;
}

.developer-visual.developer-visual--v20
  > img.developer-visual__architecture:first-child:last-child {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .case-page .case-v11-stage--document {
    aspect-ratio: auto;
    max-height: none;
    padding: 8px;
  }

}