/* layout.css - 容器与栅格 */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-inline:var(--container-pd);
}
.container-narrow{ max-width:760px; }
.container-wide{ max-width:1400px; }

.section{ padding-block:var(--section-py); }
.section-sm{ padding-block:clamp(48px,7vh,80px); }

.grid{ display:grid; gap:clamp(20px,4vw,40px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:768px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
}

.flex{ display:flex; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-sm{ gap:8px; } .gap-md{ gap:16px; } .gap-lg{ gap:32px; }

.split-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,80px);
  align-items:center;
}
@media (max-width:860px){
  .split-2{ grid-template-columns:1fr; }
}