:root {
 --hmain: calc(var(--nav) + var(--main));
 --cols: 6;
 --gal: calc(var(--hmain) - var(--_) + 0.4vw);
 --img: calc((var(--gal) - ((var(--cols) - 1) * var(--i_)))/var(--cols));
}
body {
 width: calc(var(--hmain) + var(--links));
 grid-template-columns: var(--hmain) var(--links);
}
section.links {
 background-color: #020;
}

main nav.galleries {
 /* grid-template-columns: repeat(auto-fit, var(--img)); */
 grid-template-columns: auto;
}
main section {
 width: var(--hmain);
 display: grid;
 text-align: center;
}

main section nav a {
 display: inherit;
 display: grid;
 color: #ccc;
 text-decoration: none;
}
article.welcome {
 padding-bottom: 4vh;
}
article.welcome p {
 padding-left: 1.6vh;
 padding-right: 1.6vh;
}
main a {
 margin: 0 auto;
 display: grid;
 text-decoration: none;
}
a.archive {
 margin: 0 auto 2vh auto;
 display: block;
 border-radius: 4vh;
 text-align: center;
 overflow: hidden;
}
a.archive img {
 width: var(--gal);
 object-fit: cover;
 transition: 1s;
 border-radius: inherit;
}
a.archive:hover img {
 scale: 1.08;
}
main.home h1 {
 color: #ccc;
 border-color: #999;
}
main.home p.homeintro {
 font-size: calc(var(--fs)*0.88);
}
nav.homecats {
 display: grid;
 gap: 2vh;
 margin: 2vh auto 3vh auto;
 text-align: center;
 font-size: calc(var(--fs)*0.98);
}
nav.homecats a, nav.homecats span {
 text-align: center;
}
nav.homecats span {
 color: #ff0;
}

/* 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: 96vw;
  --cols: 2;
  --gal: calc(var(--hmain)*0.98);
  --img: calc((var(--gal) - ((var(--cols) - 1) * var(--i_)))/var(--cols));
 }
 body {
  width: var(--hmain);
  display: grid;
  grid-template-columns: auto;
 }
 main {
  width: calc(var(--hmain));
  height: auto;
  overflow-y: auto;
  border-right: none;
 }

 article.welcome p {
  width: 92vw;
 }


main h1 {
 margin: 1vh auto;
 font-size: calc(var(--fs)*0.98);
 padding: 1vw 0 0.8vw 0;
}
 main div.galleries {
  grid-template-columns: auto auto;
 }

}