/*@import "https://unpkg.com/open-props";*/
/*@import "https://unpkg.com/open-props/normalize.min.css";*/

.media-video-scroller {
    --_spacer: var(--size-3);
    display: grid;
    gap: var(--_spacer);
    grid-auto-flow: column;
    grid-auto-columns: 21%;
    padding: 0 var(--_spacer) var(--_spacer);
    /* overflow-x: auto; */
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.media-video-scroller--with-groups {
    grid-auto-columns: 80%;
}

.media-video-group {
    display: grid;
    gap: var(--_spacer);
    grid-auto-flow: column;
}

.media-video-element {
    display: grid;
    grid-template-rows: min-content;
    gap: var(--_spacer);
    padding: var(--_spacer);
    background: var(--surface-2);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
}

    .media-video-element > img {
        inline-size: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .container-videos{
        display: flex;
        justify-content: space-between;
    }

/*.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: var(--_spacer, 1rem);
}

    .snaps-inline > * {
        scroll-snap-align: start;
    }*/

/* general styling */

/*.container {
    inline-size: min(100% - 4rem, 70rem);
    margin-inline: auto;
}*/

/*.flow {
    display: grid;
    gap: var(--size-3);
}*/


/*.section-title {
    padding-inline-start: var(--size-6);
    margin-block: var(--size-9) var(--size-3);
}*/