/* Keep the existing four-thumbnail size, centring every incomplete row. */
.project-deck__thumbnails {
    --portfolio-thumbnail-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--portfolio-thumbnail-gap);
}
.project-deck__thumbnails > button {
    flex: 0 0 calc((100% - 3 * var(--portfolio-thumbnail-gap)) / 4);
    min-width: 0;
}
@media (max-width: 600px) {
    .project-deck__thumbnails { --portfolio-thumbnail-gap: 8px; }
}

/* Scaling a wide overlay creates unequal horizontal and vertical overhang. */
.project-video-player__play,
.project-video-player__play:hover,
.project-video-player__play:active {
    transform: none;
}
@media (hover: hover) and (pointer: fine) {
    .project-video-player__play:hover {
        box-shadow: 0 0 0 8px rgba(0, 0, 0, .12);
    }
}

/* Opt into row layout only where an editor has selected column items. */
.project-assets:has(> .project-asset--half, > .project-asset--third) {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-count: auto;
    column-gap: 30px;
    row-gap: 72px;
    align-items: start;
}
.project-assets:has(> .project-asset--half, > .project-asset--third) > .project-asset {
    grid-column: span 6;
    min-width: 0;
    margin-bottom: 0;
}
.project-assets:has(> .project-asset--half, > .project-asset--third) > .project-asset--half {
    grid-column: span 3;
}
.project-assets:has(> .project-asset--half, > .project-asset--third) > .project-asset--third {
    grid-column: span 2;
}
/* A different layout starts a fresh row; keep editor order without backfilling. */
.project-assets > :not(.project-asset--half) + .project-asset--half {
    grid-column: 1 / span 3;
}
.project-assets > :not(.project-asset--third) + .project-asset--third {
    grid-column: 1 / span 2;
}
@media (max-width: 600px) {
    .project-assets:has(> .project-asset--half, > .project-asset--third) {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }
    .project-assets:has(> .project-asset--half, > .project-asset--third) > .project-asset {
        grid-column: 1;
    }
}