.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin-desktop);
  width: 100%;
}

.grid {
  display: grid;
  gap: var(--gutter-desktop);
}

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

.grid-hero {
  grid-template-columns: 52% 48%;
  gap: 0; /* Let flex/padding handle the gap if needed, or define specific grid gaps */
}

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

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

.justify-between {
  justify-content: space-between;
}

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }

.mt-md { margin-top: var(--spacing-md); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.py-xl { padding-block: var(--spacing-xl); }
.py-2xl { padding-block: var(--spacing-2xl); }
.py-3xl { padding-block: var(--spacing-3xl); }