$l-cols: 12;
$m-cols: 8;
$s-cols: 4;
$xs-cols: 2;

$l-grid: "[grid-col-start] repeat(#{$l-cols}, 1fr) [grid-col-end]";
$m-grid: "[grid-col-start] repeat(#{$m-cols}, 1fr) [grid-col-end]";
$s-grid: "[grid-col-start] repeat(#{$s-cols}, 1fr) [grid-col-end]";
$xs-grid: "[grid-col-start] repeat(#{$xs-cols}, 1fr) [grid-col-end]";

$l-breakpoint: 1000px;
$m-breakpoint: 800px;
$s-breakpoint: 600px;
$xs-breakpoint: 400px;

.grid {
    display: grid;
    height: 100%;
    grid-template-columns: #{$l-grid};
    grid-template-rows: var(--header-height) auto var(--footer-height);
    grid-gap: 20px;

    > header {
        grid-column: span $l-cols;
    }

    > .sidebar {
        grid-column: 2 / span 2;
        grid-row-start: 2;
    }

    > .sidebar-right {
        display: none;
        grid-column: span 2;
        grid-row-start: 2;
    }

    > section {
        grid-column: 4 / span ($l-cols - 4);
        grid-row-start: 2;
    }

    > footer {
        grid-column: span $l-cols;
        grid-row-start: 3;
    }
}

@media (max-width: $l-breakpoint) {
    .grid {
        grid-template-columns: #{$m-grid};
        grid-gap: 10px;
        

        > header {
            grid-column: span $m-cols;
        }

        > .sidebar {
            grid-column: grid-col-start / span 2;
            grid-row-start: 2;
        }

        > section {
            grid-column: 3 / span 6;
            grid-row-start: 2;
        }

        > footer {
            grid-column: span $m-cols;
            grid-row-start: 3;
        }
    }
}

@media (max-width: $m-breakpoint) {
    .grid {
        grid-template-columns: #{$s-grid};

        > header, > .sidebar, > section, > footer {
            grid-column: span $s-cols;
        }

        > section {
            grid-row-start: 2;
        }

        > .sidebar {
            grid-row-start: 3;
        }

        > footer {
            grid-row-start: 4;
        }
    }
}

@media (max-width: $s-breakpoint) {
    .grid {
        grid-template-columns: #{$xs-grid};

        > header, > .sidebar, > section, > footer {
            grid-column: span $xs-cols;
        }
    }
}