.media-slot { position: relative; min-width: 0; overflow: hidden; border-radius: inherit; }
.media-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-slot [hidden] { display: none !important; }
.media-slot--fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-slot--fill .media-slot-frames, .media-slot--fill .media-slot-slide { height: 100%; }
.media-slot--gallery .media-slot-slide { aspect-ratio: 4 / 3; }
.media-slot[data-media-ready] .media-slot-frames { display: grid; }
.media-slot[data-media-ready] .media-slot-slide { grid-area: 1 / 1; min-width: 0; }
.media-slot-controls { position: absolute; z-index: 1; top: 12px; right: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; max-width: calc(100% - 24px); padding: 6px; border-radius: 12px; background: #111c; color: #fff; font: 14px/1.2 sans-serif; }
.media-slot-controls button { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #fff7; border-radius: 8px; background: #111; color: #fff; cursor: pointer; font: inherit; }
.media-slot-controls button:hover { background: #333; }
.media-slot-controls button:focus-visible, .media-slot:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.media-slot-controls span { padding: 0 4px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
    .media-slot-controls { opacity: 0; pointer-events: none; }
    .media-slot:hover .media-slot-controls,
    .media-slot:focus-within .media-slot-controls { opacity: 1; pointer-events: auto; }
}