/* A wide feature aligns with four small cards and their three internal gutters. */
.media-design-preview:is([data-media-variant="F"], [data-media-variant="I"], [data-media-variant="M"]) .media-card--large.is-wide {
  grid-column: span 2;
  height: calc(var(--media-unit) * 4 + var(--media-gutter) * 3);
}

.media-design-preview:is([data-media-variant="F"], [data-media-variant="I"], [data-media-variant="M"]) .media-card--large.is-wide > .media-card__visual:not(.media-card__visual--player) {
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
}

.media-design-preview[data-media-variant="F"] .media-card {
  --card-soft: #5a4c68;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--media-purple-pale);
}

.media-design-preview[data-media-variant="F"] .media-card--medium {
  background: var(--media-purple-medium);
}

.media-design-preview[data-media-variant="F"] .media-card--large {
  --card-ink: #fff;
  --card-soft: #fff;
  --card-focus: #fff;
  background: var(--media-purple);
}

.media-design-preview[data-media-variant="F"] .media-card__visual {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: transparent;
}

.media-design-preview[data-media-variant="F"] .media-card:has(> .media-card__visual) .media-card__content {
  padding-top: var(--media-padding);
}

/* Preserve landscape imagery when a feature collapses to one column. */
.media-design-preview[data-media-variant="F"] .media-card__visual:not(.media-card__visual--player) {
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 9;
}

/* I shares the open rules, but uses full-width landscape feature images. */
.media-design-preview[data-media-variant="I"] .media-card {
  border: 0;
  border-top: 1px solid var(--media-rule);
  border-radius: 0;
  background: transparent;
}

.media-design-preview[data-media-variant="I"] .media-card__content {
  padding: var(--media-padding) 0;
}

/* Neutral outlines group the text entries; purple marks the major features. */
.media-design-preview[data-media-variant="J"] .media-card {
  border: 1px solid var(--media-rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 65%, white);
}

.media-design-preview[data-media-variant="J"] .media-card--medium {
  border-color: color-mix(in srgb, var(--ink) 8%, var(--line));
  background: white;
}
.media-design-preview[data-media-variant="J"] .media-card__content { padding: var(--media-padding); }

.media-design-preview[data-media-variant="M"] .media-card {
  --card-soft: #5a4c68;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--media-purple-pale);
}

.media-design-preview[data-media-variant="M"] .media-card--medium {
  background: var(--media-purple-medium);
}

.media-design-preview:is([data-media-variant="J"], [data-media-variant="M"]) .media-card--large {
  --card-ink: #fff;
  --card-soft: #fff;
  --card-focus: #fff;
  border-radius: 10px;
  overflow: hidden;
  background: var(--media-purple);
}

.media-design-preview:is([data-media-variant="J"], [data-media-variant="M"]) .media-card__visual {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 620px) {
  .media-design-preview:is([data-media-variant="F"], [data-media-variant="I"], [data-media-variant="M"]) .media-card--large {
    grid-column: span 1;
  }
}