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

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

body {
  margin: 0;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

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

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

  .navigation {
    background-color: lightcoral;
    /* grid-column: 11/13;
    grid-row: 3/4;
    order: 1; */
    grid-column: container;
  }
  .main {
    background-color: lightblue;
    /* grid-column: 4/11;
    grid-row: 2/4; */
    grid-column: 2 / span 10;
  }

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

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

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