@import"https://use.typekit.net/yql2jdm.css";body{margin:0;padding:0;background:#000;color:#fff;font-family:proxima-nova,sans-serif;display:flex;flex-flow:column nowrap;align-items:center;min-height:100dvh}*{box-sizing:border-box}header,main,footer{max-width:1800px;padding:0 24px;width:100%}header h1{display:flex;flex-flow:row nowrap;align-items:center;font-size:clamp(20px,1.77vw,34px);font-weight:600;text-transform:uppercase;text-wrap:balance;margin:1.2em 0}header h1 img{height:2.4em;margin-right:.6em}main{flex:1 0 auto;display:flex;align-items:center;max-width:1400px}main .row{--pad: 12px;display:flex;flex-flow:row wrap;justify-content:center;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));width:calc(100% + 2 * var(--pad))}main .row>.col{flex:0 0 33%;max-width:33%;padding:0 var(--pad) calc(var(--pad) * 2)}main .row>.col a{display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:center;overflow:hidden;border-radius:20px;min-height:min(300px,(100vh - 200px) / 2);width:100%;position:relative;text-decoration:none;color:#fff;line-height:1.2;text-align:center}main .row>.col a:before{content:"";background:#666;position:absolute;top:0;left:0;width:100%;height:100%}main .row>.col a>*{position:relative}main .row>.col a .bg{position:absolute;border-radius:20px;top:1px;left:1px;width:calc(100% - 2px);height:calc(100% - 2px);overflow:hidden}main .row>.col a .bg img{display:block;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal-point, 50%) center;transition:transform .4s ease;transform-origin:center}main .row>.col a .logo{max-width:80%;position:absolute;top:47%;left:50%;transform:translate(-50%,-50%)}main .row>.col a .tags{text-transform:uppercase;font-size:clamp(12px,.9375vw,18px);margin-top:min(10px,.6em);padding:0 1em;text-wrap:balance;opacity:.7}main .row>.col a .url{text-transform:lowercase;font-size:clamp(12px,1.25vw,24px);margin-bottom:min(10px,.8em);padding:0 1em}@media(hover:hover){main .row>.col{text-decoration:none}main .row>.col:hover a .bg img{transform:scale(1.05)}}@media screen and (max-width:1024px){main .row{--pad: 7px}main .row>.col{flex:0 0 50%;max-width:50%}main .row>.col a .tags{font-size:clamp(12px,1.7578125vw,18px)}main .row>.col a .url{font-size:clamp(12px,2.34375vw,24px)}}footer p{font-size:clamp(14px,.94vw,18px);font-weight:400;margin:1em 0;color:#999;text-wrap:pretty}@media screen and (max-width:768px){footer p{text-align:center}}
