.page-container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  box-sizing: border-box;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
}


/* ========================= 
       RESPONSIVE 
========================= */

@media (max-width: 900px) {
  :root {
    --page-margin: 18px;
    --grid-gutter: 18px;
    --section-spacing: 90px;
  }
}

@media (max-width: 640px) {
  :root {
    --page-margin: 16px;
    --grid-gutter: 16px;
  }
}

@media (max-width: 400px) {
  :root {
    --page-margin: 12px;
    --grid-gutter: 12px;
  }
}