:root {
 --hmain: calc(var(--nav) + var(--main));
 --cols: 6;
 --section: calc(var(--hmain) - var(--_) + 0.4vw);
 --img: calc((var(--section) - ((var(--cols) - 1) * var(--i_)))/var(--cols));
}
body {
 width: calc(var(--hmain) + var(--aside));
 grid-template-columns: var(--hmain) var(--aside);
}
main section {
 grid-template-columns: repeat(auto-fit, var(--img));
}
main h1 {
 width: auto;
 margin: 0 auto;
 padding: 0.6vw 4.8vw 0.5vw 4.8vw;
 border-radius: 0 0 2vw 2vw;
 color: #ccc;
 border-left: 1px #555 solid;
 border-right: 1px #555 solid;
 border-bottom: 1px #555 solid;
 font-weight: normal;
 font-size: calc(0.64rem + 0.64vw);
 text-align: center;
}
main h2 {
 text-align: center;
}
main a {
 margin: 0 auto;
 display: grid;
 text-decoration: none;
}
a.archive {
 margin: 0 auto 2vh auto;
 display: block;
 width: var(--section);
 overflow: hidden;
}
a.archive img {
 width: var(--section);
 object-fit: cover;
 transition: 1s;
}
a.archive:hover img {
 scale: 1.08;
}

/* lores desktop or laptop */
@media only screen and (max-width: 1366px) {
  :root {
  --cols: 4;
 }
}
/* lores tablet */
@media only screen and (max-width: 1080px) {
  :root {
  --cols: 3;
 }
}
/* mobile */
@media only screen and (max-width: 768px) {
 :root {
  --hmain: 98vw;
  --cols: 2;
  --section: var(--hmain);
  --img: calc((var(--section) - ((var(--cols) - 1) * var(--i_)))/var(--cols));
 }
 body {
  width: 100vw;
  display: grid;
  grid-template-columns: auto;
  font-size: calc(0.5rem + 0.5vw);
 }
 main {
  width: var(--hmain);
  height: auto;
  overflow-y: auto;
  border-right: none;
 }
 main h1 {
 width: auto;
 font-size: calc(0.9rem + 0.9vw);
 padding: 0.6vw 8vw 0.5vw 8vw;
 border-radius: 4.2vw;
}
 main section {
  grid-template-columns: auto auto;
 }

}