.workbench-gallery[data-workbench-gallery] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
.workbench-gallery-main {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #ddd;
    position: relative;
}
.workbench-gallery-main img,
.workbench-gallery-main img:first-child {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    grid-column: auto;
    transition: opacity .2s ease, transform .35s ease;
}
.workbench-gallery-main.is-swapping img {
    opacity: .25;
    transform: scale(1.012);
}
.workbench-gallery-enlarge {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(241, 239, 232, .68);
    border-radius: 50%;
    background: rgba(13, 23, 27, .62);
    color: var(--paper);
    font: 300 28px/1 var(--sans);
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 18px rgba(214, 104, 69, .18);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.workbench-gallery-enlarge:hover,
.workbench-gallery-enlarge:focus-visible {
    transform: scale(1.08);
    border-color: var(--rust);
    background: rgba(13, 23, 27, .82);
    box-shadow: 0 0 24px rgba(214, 104, 69, .48);
}
.workbench-gallery-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 4px 12px;
}
.workbench-gallery .workbench-thumbnail {
    flex: 0 0 clamp(82px, 11vw, 145px);
    aspect-ratio: 4 / 3;
    padding: 3px;
    border: 1px solid rgba(22, 32, 29, .24);
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
    opacity: .62;
    transition: opacity .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.workbench-gallery .workbench-thumbnail:hover,
.workbench-gallery .workbench-thumbnail:focus-visible,
.workbench-gallery .workbench-thumbnail.is-preview {
    opacity: .9;
    border-color: var(--rust);
    transform: translateY(-2px);
}
.workbench-gallery .workbench-thumbnail.is-active {
    opacity: 1;
    border-color: var(--rust);
    box-shadow: 0 0 0 1px rgba(214, 104, 69, .4), 0 0 18px rgba(214, 104, 69, .34);
}
.workbench-gallery .workbench-thumbnail img,
.workbench-gallery .workbench-thumbnail img:first-child {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    grid-column: auto;
    pointer-events: none;
}
@media (max-width: 600px) {
    .workbench-gallery-enlarge { right: 12px; bottom: 12px; width: 42px; height: 42px; }
}