/* 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="K"], [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="K"], [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="H"] .media-card__visual--image {
  height: calc(var(--media-unit) + var(--media-gutter) * 2);
}

.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);
}

/* H is a compact open grid with every neutral rule on the same rhythm. */
.media-design-preview[data-media-variant="H"] .media-card {
  border: 0;
  border-top: 1px solid var(--media-rule);
  border-radius: 0;
  background: transparent;
}

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

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

/* 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) 24%, var(--line));
  background: white;
}
.media-design-preview[data-media-variant="J"] .media-card__content { padding: var(--media-padding); }

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

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

.media-design-preview:is([data-media-variant="J"], [data-media-variant="K"], [data-media-variant="L"], [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="K"], [data-media-variant="L"], [data-media-variant="M"]) .media-card__visual {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* K uses two text columns inside a single feature, not nested cards. */
.media-design-preview[data-media-variant="K"] .media-card--large.is-wide .media-card__content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 0 var(--media-gutter);
}
.media-design-preview[data-media-variant="K"] .media-card--large.is-wide .media-card__heading { grid-column: 1; grid-row: 1; }
.media-design-preview[data-media-variant="K"] .media-card--large.is-wide .media-card__description { grid-column: 2; grid-row: 1; }
.media-design-preview[data-media-variant="K"] .media-card--large.is-wide .media-card__footer { grid-column: 2; grid-row: 2; }

/* L measures genuine content and finishes every card on the shared baseline pitch. */
.media-design-preview[data-media-variant="L"] .media-card { height: auto; min-height: var(--media-unit); }
.media-design-preview[data-media-variant="L"] .media-card--small { height: var(--media-unit); }
.media-design-preview[data-media-variant="L"] .media-card__visual { height: auto; aspect-ratio: 16 / 10; }

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