/* Set up the grid container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 5px;
    grid-auto-flow: dense;
}

/* Style the images */
.grid-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Apply different styles for horizontal and vertical images */
.grid-container .horizontal {
    grid-column: span 2;
}

.grid-container .vertical {
    grid-column: span 1;
}

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
    }

    .grid-container .horizontal {
        grid-column: span 1;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.grid-container img {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}