/**
 * Grid System
 * - Mobile:   <= 768px (6 cols, gap 12)
 * - Tablet:   769-1024px (12 cols, gap 12) — desktop layout + mobile gap
 * - Desktop:  1025-1440px (12 cols, gap 16)
 * - Large Desktop: 1441-1920px (12 cols, gap 16) — header/footer full width, content as 1440
 * - Extra Large: >= 1921px (12 cols, gap 16) — same as Large Desktop
 */

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Tablet Grid (769px - 1024px) - 12 columns, одинаковые ширины */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--grid-gap);
        padding: 0 12px;
    }
    
    /* Column spans */
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 7; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
    
    /* Column positions */
    .col-start-1 { grid-column-start: 1; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-4 { grid-column-start: 4; }
    .col-start-5 { grid-column-start: 5; }
    .col-start-6 { grid-column-start: 6; }
    .col-start-7 { grid-column-start: 7; }
    .col-start-8 { grid-column-start: 8; }
    .col-start-9 { grid-column-start: 9; }
    .col-start-10 { grid-column-start: 10; }
    .col-start-11 { grid-column-start: 11; }
    .col-start-12 { grid-column-start: 12; }
}

/* Desktop Grid (1025px - 1440px) - 12 columns, одинаковые ширины */
@media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--grid-gap);
        padding: 0 12px;
    }
    
    /* Column spans */
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 7; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
    
    /* Column positions */
    .col-start-1 { grid-column-start: 1; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-4 { grid-column-start: 4; }
    .col-start-5 { grid-column-start: 5; }
    .col-start-6 { grid-column-start: 6; }
    .col-start-7 { grid-column-start: 7; }
    .col-start-8 { grid-column-start: 8; }
    .col-start-9 { grid-column-start: 9; }
    .col-start-10 { grid-column-start: 10; }
    .col-start-11 { grid-column-start: 11; }
    .col-start-12 { grid-column-start: 12; }
}

/* Large Desktop Grid (1441px - 1920px) - 12 columns, одинаковые ширины */
@media (min-width: 1441px) and (max-width: 1920px) {
    .container {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--grid-gap);
        padding: 0 12px;
        max-width: 1440px;
        margin: 0 auto;
    }
    
    /* Column spans */
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 7; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
    
    /* Column positions */
    .col-start-1 { grid-column-start: 1; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-4 { grid-column-start: 4; }
    .col-start-5 { grid-column-start: 5; }
    .col-start-6 { grid-column-start: 6; }
    .col-start-7 { grid-column-start: 7; }
    .col-start-8 { grid-column-start: 8; }
    .col-start-9 { grid-column-start: 9; }
    .col-start-10 { grid-column-start: 10; }
    .col-start-11 { grid-column-start: 11; }
    .col-start-12 { grid-column-start: 12; }
}

/* Extra Large Desktop Grid (1921px+) - 12 columns, одинаковые ширины */
@media (min-width: 1921px) {
    .container {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--grid-gap);
        padding: 0 12px;
        max-width: 1440px;
        margin: 0 auto;
    }
    
    /* Column spans */
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 7; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
    
    /* Column positions */
    .col-start-1 { grid-column-start: 1; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-4 { grid-column-start: 4; }
    .col-start-5 { grid-column-start: 5; }
    .col-start-6 { grid-column-start: 6; }
    .col-start-7 { grid-column-start: 7; }
    .col-start-8 { grid-column-start: 8; }
    .col-start-9 { grid-column-start: 9; }
    .col-start-10 { grid-column-start: 10; }
    .col-start-11 { grid-column-start: 11; }
    .col-start-12 { grid-column-start: 12; }
}

/* Mobile Grid (up to 768px) - 6 columns, одинаковые ширины */
@media (max-width: 768px) {
    .container {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--grid-gap);
        padding: 0 12px;
    }
    
    /* Column spans */
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    
    /* Column positions */
    .col-start-1 { grid-column-start: 1; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-4 { grid-column-start: 4; }
    .col-start-5 { grid-column-start: 5; }
    .col-start-6 { grid-column-start: 6; }
}