/* ===========================
   HDRIs – specific overrides
   Base styles come from Materials.css
=========================== */

/* HDRIs are 16:9 panoramic images — wider grid columns */
.preview-container {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* 16:9 aspect ratio for HDRI preview images */
.preview-item img {
    aspect-ratio: 16 / 9;
}

/* Category grid also uses 16:9 for HDRI category previews */
.category-grid-item img {
    aspect-ratio: 16 / 9;
}

/* Responsive – fewer columns because images are wider */
@media (max-width: 1400px) {
    .preview-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 900px) {
    .preview-container {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 600px) {
    .preview-container {
        grid-template-columns: repeat(1, 1fr);
        padding: 0 12px;
    }
}