@layer components {
/* r46: calm orientation images, separated from readable copy in both themes. */
.supporting-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s6); align-items: center; }
.supporting-hero__copy { min-width: 0; }
.supporting-image { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--brand-surface); }
.supporting-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.supporting-image--compact { max-width: calc(var(--s8) * 3); margin-bottom: var(--s4); }
.supporting-image--compact img { aspect-ratio: 3 / 2; }
.supporting-media-actions { margin-top: var(--s2); }
.supporting-media-preview { margin: 0; }
.supporting-media-preview svg { width: 100%; height: auto; }
.supporting-media-preview .media-viewer-image { padding: var(--s4); }
.supporting-media-preview .media-viewer-image > img { display: block; width: 100%; height: auto; }
.supporting-media-preview--graphic .media-viewer-image { width: 100%; }
.supporting-media-preview--graphic .media-viewer-image > figure { transform-origin: top left; }
.supporting-media-preview--graphic [data-zoom='1.5'] > figure { transform: scale(1.5); }
.supporting-media-preview--graphic [data-zoom='2'] > figure { transform: scale(2); }
.supporting-media-preview--graphic [data-zoom='2.5'] > figure { transform: scale(2.5); }
.supporting-media-preview--graphic [data-zoom='3'] > figure { transform: scale(3); }
@media (max-width: 767px) {
 .supporting-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
 .supporting-hero .supporting-image img { aspect-ratio: auto; }
 .supporting-image--compact { max-width: calc(var(--s8) * 2); }
}
}