/***************************
     MULTI-GRID COLUMNS
 ***************************/

.multi-column-grid-container {
    display: grid;
    gap: 1rem; 
}

.multi-column-grid-container.columns-1 {
    grid-template-columns: repeat(1, 1fr);
}

.multi-column-grid-container.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.multi-column-grid-container.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.multi-column-grid-container.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.multi-column-grid-container.columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.multi-column-grid-container.columns-6 {
    grid-template-columns: repeat(6, 1fr);
}
.multi-column-grid-item.full-width {
    grid-column: 1 / -1; 
}

@media (max-width: 768px) {
    .multi-column-grid-item.full-width {
        grid-column: 1 / -1;
    }
}

/* RESPONSIVE BREAKPOINTS  */

@media (max-width: 1200px) {
    .multi-column-grid-container.columns-6 {
        grid-template-columns: repeat(4, 1fr);
    }
    .multi-column-grid-container.columns-5 {
        grid-template-columns: repeat(4, 1fr);
    }
    .multi-column-grid-container.columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .multi-column-grid-container.columns-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .multi-column-grid-container.columns-6,
    .multi-column-grid-container.columns-5,
    .multi-column-grid-container.columns-4,
    .multi-column-grid-container.columns-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
 .multi-column-grid-container.columns-6,
    .multi-column-grid-container.columns-5,
    .multi-column-grid-container.columns-4,
    .multi-column-grid-container.columns-3,
    .multi-column-grid-container.columns-2 {
    grid-template-columns: repeat(1, 1fr);
    }
}