.tile{--tile-inset:20px;--tile-ratio:376 / 240;--tile-frame-bg:var(--c-paper);--tile-frame-bd:transparent;--tile-zb:1;--tile-z0:1;--tile-z1:1.08;flex-direction:column;gap:14px;display:flex}.tile__frame{background:var(--tile-frame-bg);border:1px solid var(--tile-frame-bd);padding:var(--tile-inset);border-radius:4px}.tile__media{aspect-ratio:var(--tile-ratio);background:#2e2a220a;position:relative;overflow:hidden}.tile__media>*,.tile__layer>.tile__zoom{position:absolute;inset:0}.tile__media>picture{display:block}.tile__media img,.tile__video{object-fit:cover;width:100%;height:100%;display:block}.tile[data-fit=contain] .tile__media{background:var(--tile-frame-bg)}.tile[data-fit=contain] .tile__media img{object-fit:contain}.tile__media{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}.tile:hover .tile__media,.tile:focus-visible .tile__media{transform:scale(1.015)}.tile[data-live=on] .tile__zoom{animation:20s ease-in-out infinite alternate tileZoom}@keyframes tileZoom{0%{transform:scale(var(--tile-z0,1))}to{transform:scale(var(--tile-z1,1.08))}}.tile .tile__zoom{transform:scale(var(--tile-zb,1))}.tile[data-live=on] .tile__layer{opacity:0;animation-timing-function:linear;animation-iteration-count:infinite}.tile[data-live=on][data-frames="2"] .tile__layer{animation-name:tileFade2;animation-duration:12s}.tile[data-live=on][data-frames="3"] .tile__layer{animation-name:tileFade3;animation-duration:18s}.tile[data-live=on][data-frames="4"] .tile__layer{animation-name:tileFade4;animation-duration:24s}.tile[data-live=on][data-frames="5"] .tile__layer{animation-name:tileFade5;animation-duration:30s}.tile[data-live=on][data-frames="6"] .tile__layer{animation-name:tileFade6;animation-duration:36s}.tile[data-live=on][data-frames="7"] .tile__layer{animation-name:tileFade7;animation-duration:42s}@keyframes tileFade2{0%{opacity:0}13.33%{opacity:1}50%{opacity:1}63.33%{opacity:0}to{opacity:0}}@keyframes tileFade3{0%{opacity:0}8.89%{opacity:1}33.33%{opacity:1}42.22%{opacity:0}to{opacity:0}}@keyframes tileFade4{0%{opacity:0}6.67%{opacity:1}25%{opacity:1}31.67%{opacity:0}to{opacity:0}}@keyframes tileFade5{0%{opacity:0}5.33%{opacity:1}20%{opacity:1}25.33%{opacity:0}to{opacity:0}}@keyframes tileFade6{0%{opacity:0}4.44%{opacity:1}16.67%{opacity:1}21.11%{opacity:0}to{opacity:0}}@keyframes tileFade7{0%{opacity:0}3.81%{opacity:1}14.29%{opacity:1}18.1%{opacity:0}to{opacity:0}}.tile[data-frames="1"] .tile__layer{opacity:1;animation:none}.tile:not([data-live=on]) .tile__layer{animation:none}.tile:not([data-live=on]) .tile__layer:first-child{opacity:1}.tile:not([data-live=on]) .tile__layer:not(:first-child){opacity:0}.tile__title{font-family:var(--f-ui);color:var(--c-olive-ink);font-size:22px;font-weight:600;line-height:1.24}.tile__note{font-family:var(--f-ui);color:var(--c-ink-2);white-space:pre-line;font-size:16px;font-weight:400;line-height:1.6}@media (prefers-reduced-motion:reduce){.tile .tile__zoom,.tile .tile__layer{animation:none!important}.tile .tile__zoom{transform:scale(var(--tile-zb,1))!important}.tile .tile__layer:first-child{opacity:1!important}.tile .tile__layer:not(:first-child){opacity:0!important}.tile .tile__media{transition:none}.tile:hover .tile__media{transform:none}}