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

body {
  margin: 0;
}

.container {
  background-color: gray;
  display: grid;
  grid-template-columns: [container-start] 1fr [content-start] repeat(12, minmax(54px, 1fr)) [content-end] 1fr [container-end];
  grid-template-rows: repeat(5, auto);
  column-gap: 1.5rem; /* 24px*/

  .header {
    background-color: red;
    grid-column: content;
    block-size: 10vh;
  }

  .navigation {
    background-color: orange;
    block-size: 15vh;
    grid-column: container;
    display: grid;
    grid-template-columns: subgrid;

    .main-menu {
      background-color: white;
      grid-column: content;
    }
  }

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

    section,
    article {
      block-size: 25svh;
      background-color: violet;
    }

    .book {
      grid-row: 1;
      grid-column: 2 / span 4;
    }
    .news {
      grid-row: 1;
      grid-column: 6 / span 8;
    }
    .board {
      grid-row: 2;
      grid-column: 2 / span 4;
    }
    .favorite {
      grid-row: 2;
      grid-column: 6 / span 4;
    }
    .twitter {
      grid-row: 2;
      grid-column: 10 / span 4;
    }
  }

  .footer {
    background-color: green;
    block-size: 10vh;
    grid-column: container;
  }
}