/* A common available area; individual media always keep their own proportions. */
.work-presentation {
  --presentation-max-width: 48rem;
  --presentation-gap: clamp(0.7rem, 1.2vw, 1rem);
  width: 100%;
  min-width: 0;
}

.chromatic-project > .work-presentation {
  grid-column: 2;
}

@media (max-width: 52rem) {
  .chromatic-project > .work-presentation {
    grid-column: 1;
  }
}

/* The complete phone view remains available with the static fallback too. */
@media (max-width: 47.999rem), (max-width: 64rem) and (max-height: 32rem) {
  .work-detail-page .chromatic-main,
  .work-detail-page .series-main { padding-inline: 4vw; }
  .work-detail-page .chromatic-project,
  .work-detail-page .series-project { grid-template-columns: minmax(0, 1fr); }
  .work-detail-page .chromatic-project > .work-presentation,
  .work-detail-page .series-project > .series-viewer { grid-column: 1; }
  .work-detail-page .chromatic-intro { position: static; max-width: 36rem; }
  .work-detail-page .chromatic-artwork { width: 92vw; max-width: none; grid-column: 1; }
}