/* 인사이트 목록 — 시안(docs/design/2026-10-23-dark-editorial/site.html) 의 인사이트 전용 규칙.
   공통 규칙(첫 화면·재단선 그림·문의 띠)은 base.css. 목록 제목은 h2 (시안은 h3) */

.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: end; margin-bottom: clamp(80px, 10vw, 140px); }
.feature .crop { grid-column: 1 / span 7; }
.feature .crop figure { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; }
.feature .crop img { width: 100%; height: 100%; object-fit: cover; }
.feature__text { grid-column: 9 / span 4; }
.feature h2 { margin: 12px 0 14px; font-size: clamp(28px, 3vw, 44px); letter-spacing: -0.055em; line-height: 1.15; }
.feature p { margin: 0 0 24px; color: var(--sub); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(16px, 2vw, 32px); }
.card figure { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: var(--bg2); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .1, 1); }
.card:hover img { transform: scale(1.05); }
.card h2 { margin: 8px 0 0; font-size: 20px; letter-spacing: -0.045em; line-height: 1.35; }

@media (max-width: 960px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .feature .crop, .feature__text { grid-column: 1 / -1; }
}