/* =========================================
   5-COLUMN LAYOUT FOR PREVIEW SECTION
   ========================================= */
.preview-grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    padding: 0 1rem;
}

.preview-spacer {
    display: block;
    /* Keeps the layout spacing */
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .preview-grid-5 {
        grid-template-columns: repeat(3, 1fr);
        /* Reduce to 3 columns on tablet (remove outer spacers visual effect) */
    }

    .preview-spacer {
        display: none;
        /* Hide spacers on smaller screens */
    }
}

@media (max-width: 768px) {
    .preview-grid-5 {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        max-width: 320px;
    }
}