.icon{display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor}.demos{grid-area:demos;align-self:end;justify-self:end;display:block;text-align:center}.demo{margin:0 0 0 1em}.demo--current{color:#333}.gridSlide{display:grid;width:calc(100%);grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:56.6666666333px 56.6666666333px 56.6666666333px 56.6666666333px 56.6666666333px;grid-template-areas:"div1 div2 div5 div5 div6 div7" "div1 div2 div5 div5 div6 div7" "div1 div2 div5 div5 div8 div9" "div3 div4 div5 div5 div8 div9" "div3 div4 div5 div5 div8 div9";gap:15px}.no-js .gridSlide{margin:0 0 15vh}.js .gridSlide{position:absolute;top:0;left:0;opacity:0}.js .grid--current{opacity:1;pointer-events:auto;position:relative;z-index:9999}.grid__item{position:relative;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;transition:transform 0.2s ease-out}.grid__item--nav{background:linear-gradient(90deg,#0873d6 0%,#0835d6 100%);color:#fff;display:flex;align-items:center;cursor:pointer;width:100%;height:147px;max-width:229px}.grid__item--nav-next .icon--nav-arrow{margin:0 auto}.grid__item--nav-prev .icon--nav-arrow{transform:rotate(180deg);margin:0 auto}.no-js .grid__item--nav{display:none}.grid__item--animateOut{animation:animateOut 0.8s cubic-bezier(.7,0,.3,1) forwards}@keyframes animateOut{to{opacity:0}}.grid__item--animateIn{animation:animateIn 0.8s cubic-bezier(.7,0,.3,1) forwards}@keyframes animateIn{from{opacity:0}to{opacity:1}}.grid--layout-1 .grid__item:nth-child(1) a,.grid--layout-2 .grid__item:nth-child(1) a,.grid--layout-3 .grid__item:nth-child(1) a,.grid--layout-1 .grid__item:nth-child(8) a,.grid--layout-2 .grid__item:nth-child(8) a,.grid--layout-3 .grid__item:nth-child(8) a,.grid--layout-1 .grid__item:nth-child(2) a,.grid--layout-2 .grid__item:nth-child(2) a,.grid--layout-3 .grid__item:nth-child(2) a,.grid--layout-1 .grid__item:nth-child(9) a,.grid--layout-2 .grid__item:nth-child(9) a,.grid--layout-3 .grid__item:nth-child(9) a{height:250px!important}.grid--layout-1 .grid__item:nth-child(3) a,.grid--layout-2 .grid__item:nth-child(3) a,.grid--layout-3 .grid__item:nth-child(3) a,.grid--layout-1 .grid__item:nth-child(4) a,.grid--layout-2 .grid__item:nth-child(4) a,.grid--layout-3 .grid__item:nth-child(4) a,.grid--layout-1 .grid__item:nth-child(6) a,.grid--layout-2 .grid__item:nth-child(6) a,.grid--layout-3 .grid__item:nth-child(6) a,.grid--layout-1 .grid__item:nth-child(7) a,.grid--layout-2 .grid__item:nth-child(7) a,.grid--layout-3 .grid__item:nth-child(7) a{height:180px!important}.grid--layout-1 .grid__item:nth-child(1),.grid--layout-2 .grid__item:nth-child(1),.grid--layout-3 .grid__item:nth-child(1){grid-area:div1}.grid--layout-1 .grid__item:nth-child(2),.grid--layout-2 .grid__item:nth-child(2),.grid--layout-3 .grid__item:nth-child(2){grid-area:div2}.grid--layout-1 .grid__item:nth-child(3),.grid--layout-2 .grid__item:nth-child(3),.grid--layout-3 .grid__item:nth-child(3){grid-area:div3}.grid--layout-1 .grid__item:nth-child(4),.grid--layout-2 .grid__item:nth-child(4),.grid--layout-3 .grid__item:nth-child(4){grid-area:div4}.grid--layout-1 .grid__item:nth-child(5),.grid--layout-2 .grid__item:nth-child(5),.grid--layout-3 .grid__item:nth-child(5){grid-area:div5}.grid--layout-1 .grid__item:nth-child(6),.grid--layout-2 .grid__item:nth-child(6),.grid--layout-3 .grid__item:nth-child(6){grid-area:div6}.grid--layout-1 .grid__item:nth-child(7),.grid--layout-2 .grid__item:nth-child(7),.grid--layout-3 .grid__item:nth-child(7){grid-area:div7}.grid--layout-1 .grid__item:nth-child(8),.grid--layout-2 .grid__item:nth-child(8),.grid--layout-3 .grid__item:nth-child(8){grid-area:div8}.grid--layout-1 .grid__item:nth-child(9),.grid--layout-2 .grid__item:nth-child(9),.grid--layout-3 .grid__item:nth-child(9){grid-area:div9}@media screen and (max-width:60em){.message{display:block}.frame{display:block;height:auto;position:relative;text-align:center}.codrops-header{flex-direction:column}.codrops-header__title{padding:1em 0}.github{margin:0 auto}.demos{padding:1em 0 0}.demo{margin:0 .5em}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}.grid__item br{content:"";display:none}.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}}