/* ==============================
   Picture Collection Wall
   ============================== */

.picture-wall {

    max-width: 1000px;

    margin: 0 auto;

    padding: 20px;

}


/* Picture grid */

.picture-wall-container {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

}


/* Individual picture */

.picture-wall-item {

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 6px;

}


/* Picture */

.picture-wall-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* ==============================
   Mobile
   ============================== */

@media (max-width: 700px) {

    .picture-wall-container {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;

    }

    .picture-wall {

        padding: 10px;

    }

}