.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-base);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-base);
}

.col-half {
  flex: 1 1 48%;
  min-width: 280px;
}

.col-full {
  flex: 1 1 100%;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm) var(--sp-base);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-sm) var(--sp-base);
}

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

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

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

.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-base { margin-top: var(--sp-base); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }

.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-base { margin-bottom: var(--sp-base); }
.mb-lg { margin-bottom: var(--sp-lg); }

.p-sm { padding: var(--sp-sm); }
.p-md { padding: var(--sp-md); }
.p-base { padding: var(--sp-base); }

.hidden { display: none !important; }

.card {
  background: var(--mb-white);
  border: var(--border-thin);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-lg);
}