/* Grid Container Styles */
.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column grid for flexibility */
    gap: 1rem; /* Fixed 16px gap for columns */
}

/* Container styles (default: ≥1280px) */
.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem; /* Matches gap between columns */
}

@media (max-width: 1000px) {
    .container {
        margin-top: 40px;
    }
}

/* Extra large screens (≥1280px): Full layout */
@media (min-width: 1280px) {
    .grid-container .grid-item.col-span-1 {
        grid-column: span 1; /* 1/12 */
    }
    .grid-container .grid-item.col-span-2 {
        grid-column: span 2; /* 2/12 */
    }
    .grid-container .grid-item.col-span-3 {
        grid-column: span 3; /* 1/4 */
    }
    .grid-container .grid-item.col-span-4 {
        grid-column: span 4; /* 1/3 */
    }
    .grid-container .grid-item.col-span-5 {
        grid-column: span 5; /* 5/12 */
    }
    .grid-container .grid-item.col-span-6 {
        grid-column: span 6; /* 1/2 */
    }
    .grid-container .grid-item.col-span-7 {
        grid-column: span 7; /* 7/12 */
    }
    .grid-container .grid-item.col-span-8 {
        grid-column: span 8; /* 2/3 */
    }
    .grid-container .grid-item.col-span-9 {
        grid-column: span 9; /* 3/4 */
    }
    .grid-container .grid-item.col-span-10 {
        grid-column: span 10; /* 10/12 */
    }
    .grid-container .grid-item.col-span-11 {
        grid-column: span 11; /* 11/12 */
    }
    .grid-container .grid-item.col-span-12 {
        grid-column: span 12; /* Full width */
    }
}

/* First breakpoint: 1280px to 1024px (full width, no changes to columns) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .container {
        max-width: none; /* Full width */
    }
    .grid-container .grid-item.col-span-1 {
        grid-column: span 1; /* 1/12 */
    }
    .grid-container .grid-item.col-span-2 {
        grid-column: span 2; /* 2/12 */
    }
    .grid-container .grid-item.col-span-3 {
        grid-column: span 3; /* 1/4 stays 1/4 */
    }
    .grid-container .grid-item.col-span-4 {
        grid-column: span 4; /* 1/3 stays 1/3 */
    }
    .grid-container .grid-item.col-span-5 {
        grid-column: span 5; /* 5/12 */
    }
    .grid-container .grid-item.col-span-6 {
        grid-column: span 6; /* 1/2 stays 1/2 */
    }
    .grid-container .grid-item.col-span-7 {
        grid-column: span 7; /* 7/12 */
    }
    .grid-container .grid-item.col-span-8 {
        grid-column: span 8; /* 2/3 stays 2/3 */
    }
    .grid-container .grid-item.col-span-9 {
        grid-column: span 9; /* 3/4 */
    }
    .grid-container .grid-item.col-span-10 {
        grid-column: span 10; /* 10/12 */
    }
    .grid-container .grid-item.col-span-11 {
        grid-column: span 11; /* 11/12 */
    }
    .grid-container .grid-item.col-span-12 {
        grid-column: span 12; /* Full width */
    }
}

/* Second breakpoint: 1024px to 768px */
@media (min-width: 768px) and (max-width: 1023px) {
	.container {
    padding: 0; 
	}
    .grid-container .grid-item.col-span-1 {
        grid-column: span 2; /* 1/12 becomes 1/6 */
    }
    .grid-container .grid-item.col-span-2 {
        grid-column: span 4; /* 2/12 becomes 1/3 */
    }
    .grid-container .grid-item.col-span-3 {
        grid-column: span 6; /* 1/4 becomes 1/2 */
    }
    .grid-container .grid-item.col-span-4 {
        grid-column: span 12; /* 1/3 becomes 1/1 */
    }
    .grid-container .grid-item.col-span-5 {
        grid-column: span 12; /* 5/12 becomes 1/1 */
    }
    .grid-container .grid-item.col-span-6 {
        grid-column: span 12; /* 1/2 becomes 1/1 */
    }
    .grid-container .grid-item.col-span-7 {
        grid-column: span 12; /* 7/12 becomes 1/1 */
    }
    .grid-container .grid-item.col-span-8 {
        grid-column: span 12; /* 2/3 becomes 1/1 */
    }
    .grid-container .grid-item.col-span-9 {
        grid-column: span 12; /* 3/4 becomes 1/1 */
    }
    .grid-container .grid-item.col-span-10 {
        grid-column: span 12; /* 10/12 becomes 1/1 */
    }
    .grid-container .grid-item.col-span-11 {
        grid-column: span 12; /* 11/12 becomes 1/1 */
    }
    .grid-container .grid-item.col-span-12 {
        grid-column: span 12; /* Full width */
    }
}

/* Third breakpoint: <768px (all columns full width) */
@media (max-width: 767px) {
	.container {
    padding: 0; 
	}
    .grid-container .grid-item {
        grid-column: span 12; /* Full width (1/1) */
    }
}