@import '../../common/modern-reset.css';
@import '../../common/theme.css';

/* 헤더 */
.header {
  background: var(--pastel-coral);
  height: 10vh;
}

/* 내비게이션 */
.navigation {
  background: var(--pastel-green);
  height: 15vh;
}

/* 메인 콘텐츠 */
.content {
  background: var(--pastel-aqua);
  height: 40vh;
}

/* 사이드 바 */
.sidebar {
  background: var(--pastel-yellow);
  height: 25vh;
}

/* 푸터 */
.footer {
  background: var(--pastel-lavender);
  height: 10vh;
}

/* .container {
  display: grid;
  grid-template-columns: repeat(12, auto);

  * {
    grid-column: 1 / 13;
  }

  @media (min-width: 768px) {
    .content {
      grid-column: 1 / 7;
    }
    .sidebar {
      grid-column: 7 / 13;
    }
  }

  @media (min-width: 1024px) {
    .navigation {
      grid-column: 1 / 3;
    }
    .content {
      grid-column: 3/11;
    }
    .sidebar {
      grid-column: 11/13;
    }
  }
} */

.container {
  display: grid;
  padding: 0 20px;

  /* grid item은 order 속성을 활용하여 배치 순서를 변경할 수 있다. */
  /* .navigation {
    order: 1;
  } */

  /* 태블릿 */
  @media (min-width: 768px) {
    grid-template-columns: repeat(12, 1fr);
    /* 최대 800px */
    max-width: 800px;
    max-inline-size: 800px;
    margin: 0 auto;

    .header,
    .navigation,
    .footer {
      /* -1: 끝나는 번호 (컬럼 수가 다양할 때 유용) */
      grid-column: 1 / -1;
    }

    .content,
    .sidebar {
      /* 시작을 주지 않으면 마크업 순서대로 6칸씩 병합함 */
      grid-column: span 6;
    }
  }

  /* 데스크탑 */
  @media (min-width: 1024px) {
    max-width: 1280px;
    max-inline-size: 1280px;

    .navigation,
    .sidebar {
      grid-column: span 3;
    }
  }
}