/* css/layout.css */

/* =========================
   CONTAINER
========================= */

.container {

  width: 100%;

  max-width:
    var(--container-width);

  margin: 0 auto;

  padding-left: 32px;
  padding-right: 32px;
}

/* =========================
   SECTION
========================= */

.section {

  padding-top: 100px;
  padding-bottom: 100px;
}

/* =========================
   GRID HELPERS
========================= */

.grid {

  display: grid;
}

.flex {

  display: flex;
}

/* =========================
   SPACING HELPERS
========================= */

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* =========================
   TEXT HELPERS
========================= */

.text-center {

  text-align: center;
}

/* =========================
   SURFACE CARD
========================= */

.surface-card {

  background: var(--surface);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-md);
}