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

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

body {
  margin: 0;
}

/* 그리드 컨테이너 */
.container {
  background-color: yellow;
  min-inline-size: 1000px;
  display: grid;
  grid-template-columns: [container-start] 50px [content-start] repeat(12, 1fr) [content-end] 50px [container-end];
  grid-template-rows: 10% 10% 60% 10% 10%;
  column-gap: 24px;
  block-size: 100%;

  .header {
    background-color: gold;
    /* grid-row: 1 / 3;
    grid-column: 1 / -1;
    order: -1; */
    grid-column: content;
  }

  .navigation {
    background-color: lightgreen;
    /* grid-column: 11 / 13;
    grid-row: 3 / 4;
    order: 1; */
    grid-column: container;
  }

  .main {
    background-color: lightskyblue;
    /* grid-column: 4 / 11;
    grid-row: 2 / 4; */
    grid-column: 2 / span 10;
  }

  .sidebar {
    background-color: lightsalmon;
    /* grid-column: 1 / 4;
    grid-row: 3 / 4;
    order: -1; */
    grid-column: span 2;
  }

  .slogan {
    background-color: lightslategray;
    /* grid-column: span 12;
    order: 1; */
    grid-column: content;
  }

  .footer {
    background-color: lightpink;
    /* grid-column: span 12;
    order: 1; */
    grid-column: 1 / -1;
  }
}