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

a {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: [container-start] 1fr[content-start] repeat(12, minmax(3rem, 1fr)) [content-end] 1fr [container-end];
  grid-template-rows: repeat(5, auto);
  column-gap: 1.5rem;

  .header {
    background-color: yellow;
    grid-column: content;
    block-size: 20vh;
  }

  .navigation {
    background-color: green;
    color: white;
    grid-column: container;
    display: grid;
    grid-template-columns: subgrid;
    block-size: 20vh;

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

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

    section,
    article {
      block-size: 20vh;
    }

    .book {
      background-color: blueviolet;
      color: white;
      grid-row: 1;
      grid-column: 2 / span 4;
    }

    .news {
      background-color: pink;
      grid-row: 1;
      grid-column: 6 / span 8;
    }

    .board {
      background-color: lightgreen;
      grid-row: 2;
      grid-column: 2 / span 4;
    }

    .favorite {
      background-color: orange;
      grid-row: 2;
      grid-column: 6 / span 4;
    }

    .twitter {
      background-color: burlywood;
      grid-row: 2;
      grid-column: 10 / span 4;
    }
  }

  .footer {
    color: white;
    background-color: blue;
    grid-column: container;
    block-size: 20vh;
  }
}