@import "./../../common/modern-reset.css";
@import "./../../common/base.css";

body {
    margin: 0;
}

.container {
    max-inline-size: 960px;
    display: grid;
    grid-template-columns: [container-start] 24px [content-start] repeat(12, 1fr) [content-end] 24px [container-end];
    grid-template-rows: repeat(4, auto);
    column-gap: 1.5rem;

    justify-content: center;

    .header,
    .navigation,
    .main,
    .footer {
        grid-column: content;
    }

    .header {
        block-size: 12vh;
    }

    .navigation {
        block-size: 16vh;
        grid-template-columns: container;
        display: grid;

        .main-menu {
            grid-template-columns: content;
        }
    }

    .main {
        grid-row: 3 / 5;
        grid-column: container;
        padding: 1rem;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;

        .book {
            grid-column: 2 / 6;
        }

        .new {
            grid-column: 6 / 12;
        }

        .board {
            grid-column: 2 / 6;
        }

        .favorite {
            grid-column: 6 / 11;
        }

        .twitter {
            grid-column: 11 / 12;
        }
    }

    .footer {
        grid-column: container;
        align-self: center;
        justify-self: center;
    }
}