/* NOTE: PHOTO MOSAIC (inc/new/sections/photo-mosaic.php). Phones: 2 columns, every third photo across both.
   Tablet and desktop: the 5 x 3 mosaic of the old premium pages, the first photo large in the middle. */

.kmd-mosaic__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 150px;
    gap: 8px;
}

.kmd-mosaic__item {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--kmd-bg-sand);
}

.kmd-section--dark .kmd-mosaic__item {
    background: var(--kmd-dark-card);
}

.kmd-mosaic__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.kmd-mosaic__item:hover img {
    transform: scale(1.04);
}

.kmd-mosaic__item:nth-child(3n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* a last photo that would sit alone in its row takes the whole row */
.kmd-mosaic__item:nth-child(3n + 2):last-child {
    grid-column: span 2;
}

@media screen and (min-width: 768px) {
    .kmd-mosaic__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-rows: clamp(120px, 15vw, 210px);
        gap: 10px;
    }

    .kmd-mosaic__item:nth-child(3n + 1) {
        grid-column: auto;
        grid-row: auto;
    }

    .kmd-mosaic__item:nth-child(1) { grid-area: 1 / 3 / 3 / 5; }
    .kmd-mosaic__item:nth-child(2) { grid-area: 1 / 1 / 2 / 2; }
    .kmd-mosaic__item:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
    .kmd-mosaic__item:nth-child(4) { grid-area: 2 / 1 / 3 / 3; }
    .kmd-mosaic__item:nth-child(5) { grid-area: 1 / 5 / 2 / 6; }
    .kmd-mosaic__item:nth-child(6) { grid-area: 2 / 5 / 3 / 6; }
    .kmd-mosaic__item:nth-child(7) { grid-area: 3 / 1 / 4 / 2; }
    .kmd-mosaic__item:nth-child(8) { grid-area: 3 / 2 / 4 / 4; }
    .kmd-mosaic__item:nth-child(9) { grid-area: 3 / 4 / 4 / 5; }
    .kmd-mosaic__item:nth-child(10) { grid-area: 3 / 5 / 4 / 6; }

    .kmd-mosaic__item:nth-child(3n + 2):last-child {
        grid-column: auto;
    }

    /* 8 or 9 photos: the last ones get wider, so the bottom row stays full */
    .kmd-mosaic__item:nth-child(7):nth-last-child(2) { grid-area: 3 / 1 / 4 / 3; }
    .kmd-mosaic__item:nth-child(8):last-child { grid-area: 3 / 3 / 4 / 6; }
    .kmd-mosaic__item:nth-child(9):last-child { grid-area: 3 / 4 / 4 / 6; }
}