/* Figma 2310:1588: 1290:603 player, 81:37 thumbnails, 50px nav spacing.
   The narrow-screen rail reserves space for arrows inside the container;
   on wide screens the video spans the container and arrows sit outside it. */
.video_gallerij .video_gallerij_podium {
    position: relative;
    margin-inline: clamp(0rem, calc((var(--container-width) + 2 * (var(--bs-gutter-x) + 2.4rem) - 100vw) / 2), calc(var(--bs-gutter-x) / 2 + 2.4rem));
}

.video_gallerij .video_gallerij_media {
    position: relative;
    aspect-ratio: 1290 / 603;
    background: var(--brand-alt-color);
}

.video_gallerij .video_gallerij_media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video_gallerij .video_gallerij_afspelen {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.video_gallerij .video_gallerij_afspelen img {
    /* Exact 51.3132 x 45.5 glyph inside Figma's 66px target. */
    width: calc(var(--body-font-size) * 51.3132 / 16);
    height: calc(var(--body-font-size) * 45.5 / 16);
    transform: rotate(90deg);
    object-fit: contain;
}

.video_gallerij .video_gallerij_pijlen button {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(var(--bs-gutter-x) + 2.4rem);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--taupe);
    font-size: 2.4rem; /* Figma chevron size, shared with the arrow rail. */
}

.video_gallerij .video_gallerij_pijlen button:first-child {
    right: 100%;
}

.video_gallerij .video_gallerij_pijlen button:last-child {
    left: 100%;
}

.video_gallerij .video_gallerij_pijlen button:disabled {
    color: var(--stone);
}

.video_gallerij .video_gallerij_pijlen button:not(:disabled):is(:hover, :focus-visible) {
    color: var(--espresso);
}

.video_gallerij .video_gallerij_miniaturen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--bs-gutter-x) / 2);
    margin-top: calc(var(--default-margin-bottom) * 2.5);
}

.video_gallerij .video_gallerij_miniaturen button {
    /* 81px Figma thumbnail, allowed to shrink in very narrow columns. */
    flex: 0 1 calc(var(--body-font-size) * 81 / 16);
    aspect-ratio: 81 / 37;
    padding: 0;
    border: 0.1rem solid transparent;
    background: var(--licht-taupe);
    color: var(--espresso);
    opacity: 0.5;
    overflow: hidden;
}

.video_gallerij .video_gallerij_miniaturen :is(img, picture) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video_gallerij .video_gallerij_miniaturen button:is(.tns-nav-active, :hover, :focus-visible) {
    border-color: var(--espresso);
    opacity: 1;
}

.video_gallerij .video_gallerij_slides:not(.tns-slider) > * + * {
    margin-top: var(--default-margin-bottom);
}

.video_gallerij :is(button, video):focus-visible {
    /* The global .tns-outer * rule removes outlines with !important. */
    outline: 0.2rem solid var(--taupe) !important;
    outline-offset: -0.2rem;
}

.video_gallerij [hidden] {
    display: none !important;
}