/**
 * Image Gallery component
 */

 .image-gallery__container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: var(--card-height);
    gap: var(--card-gap);
}

.image-gallery__item {
    background-color: var(--card-background);
    grid-column: span 4;
    grid-row: span 1;

    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

@media screen and (max-width: 599px) {
    .image-gallery__item {
        grid-column: span 12;
        grid-row: span 3;
    }

    .image-gallery__item:nth-child(10) ~ .image-gallery__item {
        display: none;
    }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
    .image-gallery__item:nth-child(24n + 2) {
        grid-column: span 8;
        grid-row: span 2;
    }

    .image-gallery__item:nth-child(24n + 7) {
        grid-column: span 12;
        grid-row: span 2;
    }

    .image-gallery__item:nth-child(24n + 11) {
        grid-column: span 8;
        grid-row: span 2;
    }

    .image-gallery__item:nth-child(16) ~ .image-gallery__item {
        display: none;
    }
}

@media screen and (min-width: 900px) {
    .image-gallery__item:nth-child(33n + 2) {
        grid-column: span 4;
        grid-row: span 2;
    }

    .image-gallery__item:nth-child(33n + 9) {
        grid-column: span 8;
        grid-row: span 2;
    }

    .image-gallery__item:nth-child(33n + 20) {
        grid-column: span 4;
        grid-row: span 2;
    }

    .image-gallery__item:nth-child(33n + 26) {
        grid-column: span 4;
        grid-row: span 2;
    }

    .image-gallery__item:nth-child(33) ~ .image-gallery__item {
        display: none;
    }
}