:root {
    --black: #11100e;
    --gap: clamp(2px, 0.3vw, 5px);
    --columns: 10;
    --tile-height: 140px;
}

* { box-sizing: border-box; }
html { background: var(--black); }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--black);
}

.collage {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    grid-auto-rows: var(--tile-height);
    grid-auto-flow: dense;
    gap: var(--gap);
    width: 100%;
    margin: 0;
    padding: var(--gap);
    background: var(--black);
}

.cover {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #25221d;
}

.cover--large {
    grid-column: span 2;
    grid-row: span 2;
}

.cover--xlarge {
    grid-column: span 3;
    grid-row: span 3;
}

.cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.001);
    transition: transform 460ms cubic-bezier(.2,.72,.1,1);
}

.cover:hover { z-index: 2; }
.cover:hover img { transform: scale(1.035); }

.cover--missing {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(45deg, transparent 0 9px, rgba(17,16,14,0.13) 9px 11px),
        #c52c20;
}
.cover--missing::before {
    content: "";
    width: 34%;
    aspect-ratio: 1;
    border: 2px solid #eee4d2;
    border-radius: 50%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1100px) { :root { --columns: 8; } }
@media (max-width: 760px) { :root { --columns: 5; } }
@media (max-width: 480px) {
    :root { --columns: 3; }
    .cover--xlarge { grid-column: span 2; grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}