.card{background-color:hsl(from var(--background) h s l / 80%);background-color:var(--background);box-shadow:0 10px 20px -10px var(--dark-alpha);color:var(--accent);transform-origin:50%;border-radius:.5rem;flex-direction:column;flex:calc(100% - 2rem);text-decoration:none;transition:all .2s ease-in-out;display:flex;position:relative;&[role=button]{cursor:pointer}&.photo{display:none;& .content{display:none}& picture{border-radius:.5rem}& img{aspect-ratio:4/3}}& h2{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;line-height:1.3}& p{color:var(--muted-strong);line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;font-size:.88rem;line-height:1.5;display:-webkit-box;overflow:hidden}& a{height:calc(100% - 6rem);padding:2em;transition:transform .2s,drop-shadow .3s;display:block;position:relative}& picture{border-radius:.5rem .5rem 0 0;overflow:hidden;& img{aspect-ratio:16/9;object-fit:cover;object-position:center;width:100%;display:block}}& .content{flex-direction:column;gap:.4rem;margin:1rem 1.5rem;display:flex}& .meta{color:var(--primary);justify-content:space-between;align-items:center;gap:.5rem;margin:0 0 .5rem;display:flex}& .meta strong{text-transform:uppercase;letter-spacing:.05em;font-size:.78rem;font-weight:700}& .timestamp{font-size:.78rem}&[data-hiding=true]{opacity:0;transform:scale(.8)}&:hover{z-index:10;box-shadow:0 10px 30px -10px #000c;&:before{background-position:50%}& .glow:before{opacity:1}& picture.popup{filter:drop-shadow(0 35px 35px #0006);transform:perspective(800px)rotateX(-25deg)translateY(-40px)translateZ(50px)scale(1.15)}& picture img.popup{transform-origin:bottom;filter:drop-shadow(0 35px 35px #0006);transform:perspective(800px)rotateX(-15deg)translateY(-10px)}& picture:before{content:"";border-radius:inherit;z-index:1;opacity:1;transition:opacity .6s;position:absolute;inset:0}& picture img{transition:transform .6s cubic-bezier(.175,.885,.32,1.275);transform:translateZ(25px)rotateY(-5deg)}}}picture{justify-content:center;align-items:center;display:flex;& img[src$=svg]{fill:currentColor;object-fit:contain;width:auto;max-width:90%;height:auto;min-height:90%;max-height:150px;margin:1rem;display:block}}.glow{pointer-events:none;z-index:1;-webkit-mask-image:conic-gradient(from calc(var(--angle,0deg) + 45deg) at center, transparent 0%, black 5%, black 15%, transparent 20%, transparent 100%);mask-image:conic-gradient(from calc(var(--angle,0deg) + 45deg) at center, transparent 0%, black 5%, black 15%, transparent 20%, transparent 100%);opacity:var(--edge,0);mix-blend-mode:lighter;border-radius:.5rem;transition:opacity .2s;display:none;position:absolute;inset:-2rem}.glow:before{opacity:0;content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px hsl(from var(--accent) h s l / 100%), inset 0 0 3px 0 hsl(from var(--accent) h s l / 50%), inset 0 0 6px 0 hsl(from var(--accent) h s l / 40%), inset 0 0 15px 0 hsl(from var(--accent) h s l / 30%), inset 0 0 25px 2px hsl(from var(--accent) h s l / 20%), inset 0 0 50px 2px hsl(from var(--accent) h s l / 10%), 0 0 3px 0 hsl(from var(--accent) h s l / 50%), 0 0 6px 0 hsl(from var(--accent) h s l / 40%), 0 0 15px 0 hsl(from var(--accent) h s l / 30%), 0 0 25px 2px hsl(from var(--accent) h s l / 20%), 0 0 50px 2px hsl(from var(--accent) h s l / 10%);display:none;position:absolute;inset:2rem}@media screen and (width>=768px){.card{flex-basis:calc(33% - 1rem);max-width:calc(33% - 1rem);&:before{background:linear-gradient(-135deg, var(--light-alpha) 0%, transparent 50%), radial-gradient(circle at var(--x,50%) var(--y,50%), hsl(from var(--accent) h s l / 15%) 0%, transparent 50%);content:"";background-size:200%;border-radius:.5rem;width:100%;height:100%;transition:all .2s ease-in-out;position:absolute;top:0;left:0;box-shadow:inset 0 10px 20px #00000080}& .content{flex:1}&:not(.photo,.tile){&:first-child,&:nth-of-type(10n+5),&:nth-of-type(10n+11){flex-direction:row;flex-basis:100%;align-items:center;gap:2.5rem;max-width:100%;& h2{font-size:1.5rem}& p{-webkit-line-clamp:4}& picture{border-radius:0 .5rem .5rem 0;flex:50%;order:2;width:auto;height:100%}& picture img{aspect-ratio:16/9;height:100%!important}& .content{flex:50%;order:1;gap:.75rem;padding:2rem}& h2{font-size:2.2rem;font-weight:600;line-height:1.15}& p{font-size:1rem}& .timestamp{margin-top:.5rem;font-size:.85rem}}&:nth-of-type(10n+5),&:nth-of-type(10n+11){flex-basis:calc(66% - .5rem);max-width:calc(66% - .5rem)}}}.glow,.glow:before{display:block}}