* {
    box-sizing: border-box; /* Ensures padding/borders don't affect width calculations */
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4px;
}

.gallery-row {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    margin: 0 -4px; /* Counteracts padding on items */
}

.gallery-item {
    flex: 50%; /* Four items per row */
    max-width: 50%;
    padding: 8px;
}

.gallery-item img {
    width: 100%; /* Images scale within their container */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle;
    display: block; /* Helps with layout consistency */
    margin-top: 8px;
}

/* Responsive layout: makes a two-column layout instead of four columns on medium screens */
@media screen and (max-width: 1200px) {
    .gallery-item {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout: makes the columns stack vertically on small screens */
@media screen and (max-width: 600px) {
    .gallery-item {
        flex: 100%;
        max-width: 100%;
    }
}