img{border-radius:0}ul{display:grid;grid-template-columns:repeat( auto-fill,minmax(18em,1fr) );gap:.5em;list-style:none;margin-left:0}li{overflow:hidden;position:relative;border-color:var(--black);border-image:url(img/border.png)11 8;border-style:solid;border-width:11px 8px;min-height:5em;max-width:40em}li a::before{content:"";background-image:linear-gradient(0,rgba(18,16,16,0) 50%,rgba(0,0,0,.1) 50%),linear-gradient(90deg,rgba(255,0,0,6%),rgba(0,255,0,6%),rgba(0,0,255,6%));background-size:100% 2px,3px 100%;height:100%;width:100%;position:absolute;z-index:1}li a::after{content:attr(title);position:absolute;left:-1px;bottom:-1px;transform:translateY(4em);transition:transform .03s ease;height:4em;line-height:4em;overflow:hidden;padding:0 2em;width:calc(100% + 2px);background:rgba(0,0,0,.7);color:var(--white);z-index:1}li a:hover::after,li a:focus-visible::after{transform:translateY(0)}main img::before{position:absolute;min-height:3em;height:100%;width:100%}@media print{a[href]::before,a[href]::after{display:none}}@media(prefers-reduced-motion:no-preference){@keyframes grain{0%{transform:translate( 0,0)}25%{transform:translate( 0,-50%)}50%{transform:translate(-50%,-50%)}75%{transform:translate(-50%,0)}}main li::before{position:absolute;content:"";height:200%;width:200%;left:0;top:0;animation:grain .5s steps(4)infinite;background-image:url(img/noise.svg);background-size:auto;opacity:.45}}