.xcards{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:8px;height:500px;grid-template-rows:1fr;
  transition:grid-template-columns .5s cubic-bezier(.2,.8,.2,1),grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.xcard{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:var(--r-l);cursor:pointer;
  border:1px solid var(--line);background:#0a1b30;box-shadow:var(--shadow-s);outline:none}
.xcard:focus-visible{box-shadow:0 0 0 3px var(--blue-lt)}
.xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(1);transform:scale(1.1);transition:filter .35s ease,transform .5s ease}
.xcard[data-active="true"] img{filter:none;transform:scale(1)}
.xcard-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.45) 45%,rgba(0,0,0,.05))}
.xcard-v{position:absolute;bottom:18px;left:50%;translate:-50% 0;writing-mode:vertical-rl;rotate:180deg;
  max-height:calc(100% - 36px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.85);transition:opacity .3s ease}
.xcard[data-active="true"] .xcard-v{opacity:0}
.xcard-a{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px 24px;color:#fff}
.xcard-a > *{opacity:0;translate:0 8px;transition:opacity .3s ease,translate .3s ease}
.xcard[data-active="true"] .xcard-a > *{opacity:1;translate:0 0}
.xcard[data-active="true"] .xcard-a > :nth-child(2){transition-delay:.08s}
.xcard[data-active="true"] .xcard-a > :nth-child(3){transition-delay:.15s}
.xcard[data-active="true"] .xcard-a > :nth-child(4){transition-delay:.22s}
.xcard-i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#fff;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);backdrop-filter:blur(6px)}
.xcard-i svg{width:22px;height:22px}
.xcard-t{margin:0;max-width:34ch;font-size:clamp(18px,1.6vw,22px);font-weight:800;line-height:1.6;color:#fff}
.xcard-d{margin:0;max-width:48ch;font-size:14px;line-height:1.9;color:rgba(255,255,255,.8)}
.xcard-d b{color:#fff}
.xcard-go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;padding:8px 18px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:14.5px;font-weight:800;text-decoration:none;transition:filter .2s}
.xcard-go:hover{filter:brightness(1.1)}
.xcard-go svg{width:16px;height:16px}
.xcard-soon{display:inline-flex;align-items:center;align-self:flex-start;min-height:36px;padding:6px 16px;border-radius:999px;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:#fff;font-size:14px;font-weight:800}
.xcard[data-active="false"] .xcard-go{visibility:hidden}
:root[data-theme="dark"] .xcard{border-color:rgba(222,220,209,.10);background:#1f1e1d}
:root[data-theme="dark"] .xcard-go{color:#faf9f5}
.xcards-all{margin:16px 0 0;text-align:center}
.xcards-all a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;color:var(--fg);
  font-weight:700;font-size:14.5px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s}
.xcards-all a:hover{background:var(--bg-2)}
.xcards-all svg{width:16px;height:16px}

@media (max-width:767px){
  .xcards{height:600px;grid-template-columns:1fr!important}
  .xcard-v{left:auto;right:18px;bottom:50%;translate:0 50%;writing-mode:horizontal-tb;rotate:none;max-width:calc(100% - 36px);
    max-height:none;font-size:13.5px}
  .xcard-a{padding:16px 18px;gap:8px}
  .xcard-t{font-size:17px}
  .xcard-d{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .xcards,.xcard img,.xcard-v,.xcard-a > *{transition:none}
}