ul.gallery{--numcolumns:2;--width:96vw;--gap:0.25em;--size:calc(var(--width) / var(--numcolumns));width:var(--width);display:grid;grid-template-columns:repeat(var(--numcolumns),1fr);grid-template-rows:auto;gap:var(--gap);align-items:stretch;list-style:none}@media(min-width:768px){ul.gallery{--numcolumns:3;--width:80vw}}ul.gallery>li{display:block;height:calc(var(--size) - var(--gap));position:relative}ul.gallery>li.wide{grid-column:span 2}ul.gallery>li.wider{grid-column:span 3}ul.gallery>li.high{grid-row:span 2;height:auto}ul.gallery>li>a.zoomout{display:none}ul.gallery>li>a,ul.gallery>li>a>img{display:block;width:100%;height:100%;object-fit:cover}ul.gallery>li>a.zoomin:hover::after,ul.gallery>li>a.zoomin:focus::after{content:'';display:block;background:rgba(255,255,255,.2)url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjI0IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjExIiBjeT0iMTEiIHI9IjgiLz48bGluZSB4MT0iMjEiIHgyPSIxNi42NSIgeTE9IjIxIiB5Mj0iMTYuNjUiLz48bGluZSB4MT0iMTEiIHgyPSIxMSIgeTE9IjgiIHkyPSIxNCIvPjxsaW5lIHgxPSI4IiB4Mj0iMTQiIHkxPSIxMSIgeTI9IjExIi8+PC9zdmc+)no-repeat 50%;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}ul.gallery>li:focus-within,ul.gallery>li:target{overflow:visible;z-index:1}ul.gallery>li:target{z-index:2}ul.gallery>li:target>a.zoomin{display:none}ul.gallery>li:target>a.zoomout{display:block;top:0;right:0;bottom:0;left:0;position:fixed;z-index:12}ul.gallery>li>a.zoomout>img{object-fit:contain;padding:1vw;top:0;right:0;bottom:0;left:0;position:fixed;z-index:11;background:rgba(0,0,0,.8)}ul.gallery>li:target>a.zoomout::after{content:'Click or hit ESC to close';position:fixed;right:1vw;bottom:1vw;font-size:1rem;color:#fff;z-index:12}