@import "./../../common/base.css";

html,
body {
    block-size: 100%;
}

body {
    margin: 0;
}

.container {
    min-inline-size: 1000px;
    inline-size: 80%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: [container-start] 50px [content-start] repeat(12, minmax(74px, 1fr)) [content-end] 50px [container-end];
    grid-template-rows: 10% 5% 60% 10% 15%;
    gap: 24px;
    row-gap: 0;
    block-size: 100%;

    .header {
        /* grid-row: 1 /;
        grid-column: 1 / -1;
        order: -1; */
        grid-column: content;
    }

    .navigation {
        /* grid-column: 3;
        order: 1; */
        grid-column: container;
    }

    .main {
        /* grid-column: span 7;
        grid-row: 2 / span 2; */
        grid-column: 2 / span 10;
    }

    .sidebar {
        /* grid-column: span 3;
        order: -1; */
        grid-column: span 2;
    }

    .slogan {
        /* grid-column: 1 / -1;
        order: 1; */
        grid-column: content;
    }

    .footer {
        /* grid-column: 1 / -1;
        order: 1; */
        grid-column: 1 / -1;
    }
}