.variants{padding:12vw 8vw;background:linear-gradient(180deg,#030a11,#07131b 50%,#030a11)}
.variants-heading{max-width:850px;margin-bottom:70px}
.variants-heading>p:last-child{max-width:570px;color:var(--muted);line-height:1.8}
.variant-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.variant-card{color:var(--ink);text-decoration:none;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:12px 12px 24px;overflow:hidden;transition:.35s}
.variant-card:hover{transform:translateY(-7px);border-color:rgba(78,242,255,.55);box-shadow:0 24px 70px rgba(0,0,0,.35)}
.variant-visual{height:min(50vw,640px);position:relative;overflow:hidden;background:#071218}
.variant-visual img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.variant-card:hover img{transform:scale(1.035)}
.variant-visual span{position:absolute;left:20px;top:20px;padding:9px 12px;background:rgba(2,8,14,.78);backdrop-filter:blur(9px);font-size:9px;letter-spacing:.2em}
.variant-visual.black span{color:#ff6c24}
.variant-copy{display:flex;justify-content:space-between;align-items:end;padding:25px 12px 18px}
.variant-copy small{font-size:8px;letter-spacing:.18em;color:var(--muted)}
.variant-copy h3{font:600 clamp(36px,4vw,58px) 'Space Grotesk';letter-spacing:-.05em;margin:4px 0 0}
.variant-copy>strong{font:700 clamp(30px,3vw,44px) 'Space Grotesk'}
.variant-copy>strong small{font:500 9px 'DM Sans'}
.variant-card>b{display:block;margin:0 12px;padding:17px;text-align:center;background:var(--aqua);color:#001118;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.variant-card.black-link>b{background:#ff6422;color:#120600}
@media(max-width:760px){
  .variants{padding:100px 18px}.variants-heading{margin-bottom:40px}.variants-heading h2{font-size:50px}.variant-grid{grid-template-columns:1fr}.variant-visual{height:auto;aspect-ratio:1}.variant-copy{padding:20px 8px 15px}.variant-copy h3{font-size:38px}.variant-copy>strong{font-size:32px}.variant-card>b{margin:0 8px}
}