*,*::after,*::before{box-sizing:border-box}
body{--gap:10px;--body-text:#fff;--body-bg:#000;--link-text:#ef3b3b;--link-text-hover:#fff;--grid-name-text:#fff;--grid-title-text:#fff;--grid-nav-text:#fff;--grid-nav-bg:#442ef4;--grid-nav-text-hover:#fff;--grid-nav-bg-hover:#1f1f1f;--grid-text:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;min-height:600px;color:var(--body-text);background:var(--body-bg)}
a{text-decoration:none;color:var(--link-text);outline:none}
a:hover,a:focus{color:var(--link-text-hover)}
.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none}
.icon{display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor}
.js .loading::before{content:'';position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;background:var(--body-bg)}
.js .loading::after{content:'';position:fixed;z-index:10000;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;pointer-events:none;background:var(--body-text);transform-origin:0% 50%;animation:loaderAnim 1.5s linear infinite alternate forwards}
@keyframes loaderAnim{0%{transform:scale3d(0,1,1);transform-origin:0% 50%}50%{transform:scale3d(1,1,1);transform-origin:0% 50%}51%{transform:scale3d(1,1,1);transform-origin:100% 50%}100%{transform:scale3d(0,1,1);transform-origin:100% 50%}}
.message{background:var(--body-text);color:var(--body-bg);text-align:center;padding:1em;display:none}
.grid{display:grid;width:calc(100% - 2em);height:calc(100vh - 2em);grid-auto-rows:calc((calc(100vh - 2em) / 30) - var(--gap));grid-auto-columns:calc((calc(100% - 2em) / 30) - var(--gap));justify-content:center;align-content:center;grid-gap:var(--gap);pointer-events:none}
.js .grid{position:absolute;top:1em;left:1em;opacity:0}
.js .grid--current{opacity:1;pointer-events:auto}
.grid__item{position:relative;padding:1em;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;transition:transform 0.2s ease-out}
.grid__item--name,.grid__item--title,.grid__item--text{pointer-events:none;padding:0;margin:0}
.grid__item--name,.grid__item--title{text-transform:uppercase;line-height:0.8;font-family:'Kanit',sans-serif}
.grid__item--name{font-size:7vw;color:var(--grid-name-text)}
.grid__item--title{font-size:3.5vh;text-transform:uppercase;-webkit-writing-mode:vertical-lr;writing-mode:vertical-lr;text-align:right;display:flex;justify-content:flex-end;color:var(--grid-title-text)}
.grid__item--text{font-size:0.85em;line-height:1.2;display:flex;color:var(--grid-text)}
.grid__item--nav{background:var(--grid-nav-bg);color:var(--grid-nav-text);display:flex;align-items:center;cursor:pointer}
.grid__item--nav:hover{background:var(--grid-nav-bg-hover);color:var(--grid-nav-text-hover)}
.grid__item--nav-next .icon--nav-arrow{margin:0 0 0 auto}
.grid__item--nav-prev .icon--nav-arrow{transform:rotate(180deg);margin:0}
.grid__item--animateOut{animation:animateOut 0.8s cubic-bezier(0.7,0,0.3,1) forwards}
@keyframes animateOut{to{opacity:0}}
.grid__item--animateIn{animation:animateIn 0.8s cubic-bezier(0.7,0,0.3,1) forwards}
@keyframes animateIn{from{opacity:0}to{opacity:1}}
/* Layout 1 - art folder images */
.grid--layout-1 .grid__item:nth-child(1){grid-area:11/1/17/5;background-image:url(/art/art%20%281%29.jpg)}
.grid--layout-1 .grid__item:nth-child(2){grid-area:22/6/28/10;background-image:url(/art/art%20%282%29.jpg)}
.grid--layout-1 .grid__item:nth-child(3){grid-area:8/5/22/15;background-image:url(/art/art%20%283%29.jpg)}
.grid--layout-1 .grid__item:nth-child(4){grid-area:22/10/29/15;background-image:url(/art/art%20%284%29.jpg)}
.grid--layout-1 .grid__item:nth-child(5){grid-area:1/11/8/15;background-image:url(/art/art%20%285%29.jpg)}
.grid--layout-1 .grid__item:nth-child(6){grid-area:17/15/24/20;background-image:url(/art/art%20%286%29.jpg)}
.grid--layout-1 .grid__item:nth-child(7){grid-area:9/15/17/23;background-image:url(/art/misc%20(5).jpg)}
.grid--layout-1 .grid__item:nth-child(8){grid-area:2/18/9/23;background-image:url(/art/art%20%281%29.png)}
.grid--layout-1 .grid__item:nth-child(9){grid-area:17/20/22/26;background-image:url(/art/art%20%282%29.png)}
.grid--layout-1 .grid__item:nth-child(10){grid-area:22/20/28/23;background-image:url(/art/art%20%283%29.png)}
.grid--layout-1 .grid__item:nth-child(11){grid-area:4/23/11/27;background-image:url(/art/art%20%281%29.jpg)}
.grid--layout-1 .grid__item:nth-child(12){grid-area:11/23/17/30;background-image:url(/art/art%20%282%29.jpg)}
.grid--layout-1 .grid__item:nth-child(13){grid-area:17/26/22/28;background-image:url(/art/art%20%283%29.jpg)}
.grid--layout-1 .grid__item--name{grid-area:3/12/30/25}
.grid--layout-1 .grid__item--nav-prev{grid-area:3/6/8/11}
.grid--layout-1 .grid__item--nav-next{grid-area:24/15/29/20}
/* Layout 2 */
.grid--layout-2 .grid__item:nth-child(1){grid-area:17/1/24/5;background-image:url(/art/art%20%284%29.jpg)}
.grid--layout-2 .grid__item:nth-child(2){grid-area:22/6/28/10;background-image:url(/art/art%20%285%29.jpg)}
.grid--layout-2 .grid__item:nth-child(3){grid-area:14/5/22/10;background-image:url(/art/art%20%286%29.jpg)}
.grid--layout-2 .grid__item:nth-child(4){grid-area:17/10/26/15;background-image:url(/art/misc%20(5).jpg)}
.grid--layout-2 .grid__item:nth-child(5){grid-area:1/10/17/15;background-image:url(/art/art%20%281%29.jpg)}
.grid--layout-2 .grid__item:nth-child(6){grid-area:11/15/24/20;background-image:url(/art/art%20%282%29.jpg)}
.grid--layout-2 .grid__item:nth-child(7){grid-area:5/15/11/18;background-image:url(/art/art%20%283%29.jpg)}
.grid--layout-2 .grid__item:nth-child(8){grid-area:1/18/11/23;background-image:url(/art/art%20%281%29.png)}
.grid--layout-2 .grid__item:nth-child(9){grid-area:20/20/27/24;background-image:url(/art/art%20%282%29.png)}
.grid--layout-2 .grid__item:nth-child(10){grid-area:24/15/29/20;background-image:url(/art/art%20%283%29.png)}
.grid--layout-2 .grid__item:nth-child(11){grid-area:4/23/11/27;background-image:url(/art/art%20%284%29.jpg)}
.grid--layout-2 .grid__item:nth-child(12){grid-area:11/20/20/30;background-image:url(/art/art%20%285%29.jpg)}
.grid--layout-2 .grid__item:nth-child(13){grid-area:25/24/29/28;background-image:url(/art/art%20%286%29.jpg)}
.grid--layout-2 .grid__item--name{grid-area:16/9/30/16}
.grid--layout-2 .grid__item--nav-prev{grid-area:9/5/14/10}
.grid--layout-2 .grid__item--nav-next{grid-area:20/24/25/30}
/* Layout 3 */
.grid--layout-3 .grid__item:nth-child(1){grid-area:6/1/14/5;background-image:url(/art/art%20%281%29.jpg)}
.grid--layout-3 .grid__item:nth-child(2){grid-area:3/5/14/10;background-image:url(/art/art%20%282%29.jpg)}
.grid--layout-3 .grid__item:nth-child(3){grid-area:14/1/21/5;background-image:url(/art/art%20%283%29.jpg)}
.grid--layout-3 .grid__item:nth-child(4){grid-area:19/10/28/20;background-image:url(/art/art%20%284%29.jpg)}
.grid--layout-3 .grid__item:nth-child(5){grid-area:1/10/11/18;background-image:url(/art/art%20%285%29.jpg)}
.grid--layout-3 .grid__item:nth-child(6){grid-area:11/10/19/15;background-image:url(/art/art%20%286%29.jpg)}
.grid--layout-3 .grid__item:nth-child(7){grid-area:11/15/19/20;background-image:url(/art/misc%20(5).jpg)}
.grid--layout-3 .grid__item:nth-child(8){grid-area:1/18/6/23;background-image:url(/art/art%20%281%29.png)}
.grid--layout-3 .grid__item:nth-child(9){grid-area:20/20/27/24;background-image:url(/art/art%20%282%29.png)}
.grid--layout-3 .grid__item:nth-child(10){grid-area:20/28/25/30;background-image:url(/art/art%20%283%29.png)}
.grid--layout-3 .grid__item:nth-child(11){grid-area:4/23/11/27;background-image:url(/art/art%20%284%29.jpg)}
.grid--layout-3 .grid__item:nth-child(12){grid-area:11/20/20/30;background-image:url(/art/art%20%285%29.jpg)}
.grid--layout-3 .grid__item:nth-child(13){grid-area:20/24/26/28;background-image:url(/art/art%20%286%29.jpg)}
.grid--layout-3 .grid__item--name{grid-area:15/16/30/23}
.grid--layout-3 .grid__item--nav-prev{grid-area:14/5/19/10}
.grid--layout-3 .grid__item--nav-next{grid-area:6/18/11/23}
@media screen and (max-width:60em){
  .message{display:block}
  main .grid{height:auto;top:auto!important;width:100%;left:auto!important;padding:0 2em;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));grid-auto-rows:auto!important;grid-auto-columns:auto!important;grid-gap:1vw;margin:0 0 5em}
  .grid__item{min-height:50px;grid-area:auto!important}
  .grid__item--name,.grid__item--title,.grid__item--text{grid-column:1/-1!important;justify-content:flex-start;min-height:0;padding:1vh 0;text-align:left!important}
  .grid__item--name{grid-row:1/-1!important}
  .grid .grid__item--title{-webkit-writing-mode:horizontal-tb;writing-mode:horizontal-tb}
}