/* xs	`<768px` ��綺�綣���弣�井�������弱��у�莟� */
@media only screen and (max-width: 767px) {
  .header>section,
  .aside>section {
    box-sizing: border-box;
    width     : 100%;
    margin    : 0 auto;
  }
  .footer>section {
    box-sizing: border-box;
    width     : 100%;
    margin    : 0 auto;
  }
  .content,
  .article {
    width     : 100%;
    display   : grid;
    margin    : auto;
    box-sizing: border-box;
    gap       : 20px;
  }
  .content {
    grid-template-columns: 1fr;
  }
  .article {
    grid-template-columns: 1fr;
  }
  .section {
    grid-template-columns: 0px 260px 1fr 1fr 1fr 0px;
    grid-template-areas  : "header  header  header  header  header  header"
                           ".       aside   content content content ."
                           ".       aside   article article article ."
                           ".       aside   .       .       .       ."
                           "footer  footer  footer  footer  footer  footer";
  }
  .core {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
}

/* sm	`��768px` ��綺�綣���弣�井�������弱��у�莟� */
@media only screen and (min-width: 768px) {
  .header>section,
  .aside>section {
    box-sizing: border-box;
    width     : 100%;
    margin    : 0 auto;
  }
  .footer>section {
    box-sizing: border-box;
    width     : 750px;
    margin    : 0 auto;
  }
  .content,
  .article {
    width     : 100%;
    display   : grid;
    margin    : auto;
    box-sizing: border-box;
    gap       : 20px;
  }
  .content {
    grid-template-columns: 1fr;
  }
  .article {
    grid-template-columns: 1fr;
  }
  .section {
    grid-template-columns: 0px 260px 1fr 1fr 1fr 0px;
    grid-template-areas  : "header  header  header  header  header  header"
                           ".       aside   content content content ."
                           ".       aside   article article article ."
                           ".       aside   .       .       .       ."
                           "footer  footer  footer  footer  footer  footer";
  }
  .core {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
}

/* md	`��992px` ��綺�綣���弣�井�������弱��у�莟� */
@media only screen and (min-width: 992px) {
  .header>section,
  .aside>section {
    box-sizing: border-box;
    width     : 100%;
    margin    : 0 auto;
  }
  .footer>section {
    box-sizing: border-box;
    width     : 980px;
    margin    : 0 auto;
  }
  .content,
  .article {
    width     : 100%;
    display   : grid;
    margin    : auto;
    box-sizing: border-box;
    gap       : 20px;
  }
  .content {
    grid-template-columns: 1fr;
  }
  .article {
    grid-template-columns: 1fr;
  }
  .section {
    grid-template-columns: 0px 260px 1fr 1fr 340px 20px;
    grid-template-areas  : "header  header  header  header  header  header"
                           ".       aside   content content article ."
                           ".       aside   content content article ."
                           ".       aside   .       .       .       ."
                           "footer  footer  footer  footer  footer  footer";
  }
  .core {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
}

/* lg	`��1200px` ��綺�綣���弣�井�������弱��у�莟� */
@media only screen and (min-width: 1200px) {
  .header>section,
  .aside>section {
    box-sizing: border-box;
    width     : 100%;
    margin    : 0 auto;
  }
  .footer>section {
    box-sizing: border-box;
    width     : 1180px;
    margin    : 0 auto;
  }
  .content,
  .article {
    width     : 100%;
    display   : grid;
    margin    : auto;
    box-sizing: border-box;
    gap       : 20px;
  }
  .content {
    grid-template-columns: 1fr;
  }
  .article {
    grid-template-columns: 1fr;
  }
  .section {
    grid-template-columns: 0px 260px 1fr 1fr 340px 20px;
    grid-template-areas  : "header  header  header  header  header  header"
                           ".       aside   content content article ."
                           ".       aside   content content article ."
                           ".       aside   .       .       .       ."
                           "footer  footer  footer  footer  footer  footer";
  }
  .core {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
}

.section {
  --header-height   : 68px;
  box-sizing        : border-box;
  width             : 100%;
  height            : fit-content;
  min-height        : 100%;
  margin            : 0px;
  display           : grid;
  grid-template-rows: var(--header-height) repeat(2, min-content) auto min-content;
}

.header {
  grid-area       : header;
  position        : sticky;
  top             : 0px;
  z-index         : 1;
  padding-left    : 20px;
  padding-right   : 20px;
  background-color: var(--color-background);
  box-shadow      : 0px 6px 1px -5px var(--color-background-base);
}

.aside {
  grid-area                 : aside;
  background-color          : var(--color-background-base);
  border-bottom-right-radius:  var(--border-radius);
  margin-right              : 20px;
  margin-bottom             : 20px;
}

.content {
  grid-area    : content;
  height       : fit-content;
  margin-top   : 20px;
  padding-left : 0px;
  padding-right: 20px;
  margin-bottom: 20px;
  position     : relative;
  z-index      : 0;
}

.article {
  grid-area    : article;
  height       : fit-content;
  margin-top   : 20px;
  padding-left : 0px;
  padding-right: 0px;
  margin-bottom: 20px;
  position     : relative;
  z-index      : 0;
}

.footer {
  grid-area       : footer;
  box-sizing      : border-box;
  background-color: var(--color-background-base);
  margin-top      : auto;
  padding-top     : 20px;
  padding-left    : 10px;
  padding-right   : 10px;
  padding-bottom  : 20px;
  text-align      : center;
}