/* assets/css/layout.css
   Containers + 12-col grid + sections */

.container{
  width: min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}

.section{
  padding: var(--section-pad) 0;
}

.section--tight{ padding: 36px 0; }
.section--bg{ background: #fff; }

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* Column spans (desktop default) */
.col-1{ grid-column: span 1; }
.col-2{ grid-column: span 2; }
.col-3{ grid-column: span 3; }
.col-4{ grid-column: span 4; }
.col-5{ grid-column: span 5; }
.col-6{ grid-column: span 6; }
.col-7{ grid-column: span 7; }
.col-8{ grid-column: span 8; }
.col-9{ grid-column: span 9; }
.col-10{ grid-column: span 10; }
.col-11{ grid-column: span 11; }
.col-12{ grid-column: span 12; }

/* Tablet */
@media (max-width: 980px){
  :root{ --section-pad: 80px; --gutter: 20px; }
  .grid{ gap: 18px; }

  .md-12{ grid-column: span 12; }
  .md-10{ grid-column: span 10; }
  .md-8{ grid-column: span 8; }
  .md-6{ grid-column: span 6; }
  .md-4{ grid-column: span 4; }
}

/* Mobile */
@media (max-width: 640px){
  :root{ --section-pad: 80px; --gutter: 16px; }
  .grid{ gap: 14px; }
  .sm-12{ grid-column: span 12; }
  .sm-6{ grid-column: span 6; }
}