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