/**
 * Product "Media" tab — responsive grid of embeds (YouTube / SoundCloud / Spotify…).
 * Output markup: .scherzo-media > .scherzo-media-item > <iframe>
 */

.scherzo-media {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.scherzo-media-item {
    min-width: 0; /* let grid cells shrink instead of overflowing */
}

/* All embeds fill their cell width. */
.scherzo-media-item iframe,
.scherzo-media-item embed,
.scherzo-media-item object,
.scherzo-media-item video {
    width: 100%;
    max-width: 100%;
    border: 0;
    display: block;
}

/* Video embeds keep a 16:9 box; audio players keep their own height. */
.scherzo-media-item iframe[src*="youtube"],
.scherzo-media-item iframe[src*="youtu.be"],
.scherzo-media-item iframe[src*="vimeo"] {
    aspect-ratio: 16 / 9;
    height: auto;
}

/* ── Responsive: 4 → 3 → 2 → 1 columns ── */
@media (max-width: 1200px) {
    .scherzo-media { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 782px) {
    .scherzo-media { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 480px) {
    .scherzo-media { grid-template-columns: 1fr; }
}