/* ── почему круто: липкий заголовок слева, список выгод справа ── */
/* «Почему круто»: слева тёмный лист с заголовком и видео заливки смолой, справа 6 причин сеткой 2×3. Вместо номеров — иконки */
.why__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:14px}
.why__head{grid-column:span 2;display:flex;align-items:flex-end;padding:clamp(24px,2.6vw,36px);border-radius:28px;color:#f3f1ec;
    background:linear-gradient(128deg,#25272a,#1b1c1e 50%,#222326);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 24px 40px -28px rgba(0,0,0,.6)}
.why__head .h2{color:#f3f1ec;font-size:clamp(34px,3.4vw,54px);max-width:12ch}
/* фото и видео — на белом пояске, как работы портфолио */
.why__media{position:relative;min-height:220px;margin:0;padding:6px;border-radius:28px;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,18,18,.08),0 24px 40px -28px rgba(20,18,18,.35);overflow:hidden}
.why__media img,.why__media video{position:absolute;inset:6px;display:block;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;border-radius:22px;background:#111}
/* размер ячейки задают карточки, а не пропорции фото */
.why__media--vid{grid-row:span 2}
.wi h3{margin:18px 0 0;font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(22px,1.8vw,26px);line-height:1}
@media(max-width:1000px){
  .why__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why__media--vid{grid-row:span 2}
}
@media(max-width:560px){
  .why__grid{grid-template-columns:1fr}
  .why__head{grid-column:auto}
  .why__media{aspect-ratio:1}
  .why__media--vid{grid-row:auto;aspect-ratio:9/12}
}
@media(max-width:560px){
  /* петля и край корпуса — тоньше, по пропорции */
  /* крестик внутри фото: у края экрана упирался в край */
  .why__grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px}
  .why__head,.why__media{grid-column:span 2}
  .why__media:not(.why__media--vid){aspect-ratio:4/3}
  .wi h3{margin-top:12px;font-size:18px}
}