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

.mt-8{ margin-top:8px; }
.mt-12{ margin-top:12px; }
.mt-18{ margin-top:18px; }
.mt-24{ margin-top:24px; }
.mt-32{ margin-top:32px; }

.mb-8{ margin-bottom:8px; }
.mb-12{ margin-bottom:12px; }
.mb-18{ margin-bottom:18px; }
.mb-24{ margin-bottom:24px; }

.p-12{ padding:12px; }
.p-16{ padding:16px; }
.p-20{ padding:20px; }

/* =========================
   FLEX
========================= */

.flex{ display:flex; }

.flex-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.flex-center{
  display:flex;
  justify-content:center;
  align-items:center;
}

.flex-wrap{
  flex-wrap:wrap;
}

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

.grid{
  display:grid;
}

.grid-2{
  grid-template-columns:repeat(2,1fr);
}

.grid-3{
  grid-template-columns:repeat(3,1fr);
}

.grid-gap-12{
  gap:12px;
}

.grid-gap-18{
  gap:18px;
}

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

.text-center{ text-align:center; }

.text-muted{
  color:var(--muted);
}

.small{
  font-size:12px;
}

/* =========================
   WIDTH
========================= */

.max-600{ max-width:600px; }
.max-800{ max-width:800px; }
.max-1000{ max-width:1000px; }

/* =========================
   RADIUS / SHADOW
========================= */

.round{
  border-radius:var(--radius);
}

.shadow{
  box-shadow:var(--shadow);
}