/* static/css/image-list.css */

/* --- Grid Container Layout --- */
.grid-container {
    display: grid;
    /* Adjust '250px' to your preferred minimum item width */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px; /* Adjust spacing between items */
    padding: 15px; /* Padding around the grid */
    width: 100%; /* Ensure container tries to use full width */
    box-sizing: border-box; /* Include padding in the 100% width */
    margin-bottom: 2em; /* Space below the grid */
}

/* --- Media Query for Small Screens (Affecting Grid Container) --- */
@media (max-width: 480px) {
    .grid-container {
        /* Reduce padding around the grid on small screens */
        padding-left: 5px;
        padding-right: 5px;
        /* Reduce gap between items on small screens */
        gap: 10px;
    }
    /* Note: The .image-item padding is now controlled ONLY in image-card.css */
}