.thumbnail-gallery{

    display:flex;
    column-gap: 10px;
    row-gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;

}

/* Wrapper, not the image itself — a video selection replaces the contents with
   an iframe, and an <img> element cannot be swapped for one. */
.featured-past-work{
    position: relative;
    width: 100%;
    height: 467px;
    overflow: hidden;
}

.featured-past-work__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video items show the player directly. No poster, no play overlay. */
.featured-past-work__embed{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Thumbnails are buttons so the video badge has something to hang on.
   flex-basis is pinned because these are flex items and would otherwise be
   free to shrink below their set width. */
.thumbnail-gallery .past-work-thumb{
    position: relative;
    display: block;
    flex: 0 0 86px;
    width: 86px;
    min-width: 86px;
    height: 86px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    line-height: 0;
    cursor: pointer;
    overflow: hidden;
}

/* Opacity stays on the image, not the button. Sites override it with
   `.past-work-img-thumbnail:not(.selected-thumbnail) { opacity: .5 !important }`
   to beat lazy-loaders, and putting it on both would compound to 0.25. */
.thumbnail-gallery .past-work-img-thumbnail{

    width: 86px;
    height: 86px;
    min-width: 86px;
    max-width: none;
    object-fit: cover;
    display: block;
    opacity: 0.5;
    transition: opacity 0.2s ease;

}

.thumbnail-gallery .past-work-img-thumbnail.selected-thumbnail,
.thumbnail-gallery .past-work-thumb:hover .past-work-img-thumbnail,
.thumbnail-gallery .past-work-thumb:focus-visible .past-work-img-thumbnail{
    opacity: 1;
}

/* Play badge — circle and triangle, no image asset. pointer-events stays off
   so the whole thumbnail remains one click target. */
.past-work-thumb.is-video::before,
.past-work-thumb.is-video::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.past-work-thumb.is-video::before{
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.62);
}

.past-work-thumb.is-video::after{
    width: 0;
    height: 0;
    margin: -6px 0 0 -3px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #fff;
}

@media only screen and (max-width: 767px){

    .featured-past-work{
        height: 280px;
    }

    .thumbnail-gallery .past-work-thumb{
        flex: 0 0 74.5px;
        width: 74.5px;
        min-width: 74.5px;
        height: 74.5px;
    }

    .thumbnail-gallery .past-work-img-thumbnail{

        width: 74.5px;
        height: 74.5px;
        min-width: 74.5px;
        object-fit: cover;

    }

}