/* =========================================================
   KIFMAMÈCHE 2 — Layout
   ========================================================= */

.km-container {
  width: min(100% - 2 * var(--km-gutter), var(--km-container-lg));
  margin-inline: auto;
}

.km-container--narrow {
  width: min(100% - 2 * var(--km-gutter), var(--km-container-sm));
}

.km-container--wide {
  width: min(100% - 2 * var(--km-gutter), var(--km-container-xl));
}

.km-container--full {
  width: 100%;
  max-width: none;
  padding-inline: var(--km-gutter);
}

.km-section {
  padding-block: var(--km-space-2xl);
}

.km-section--compact {
  padding-block: var(--km-space-lg);
}

.km-section--spacious {
  padding-block: var(--km-space-3xl);
}

.km-section--dark {
  background: var(--km-color-bg);
  color: var(--km-color-text);
}

.km-section--light {
  background: var(--km-color-bg-inverse);
  color: var(--km-color-text-inverse);
}

.km-section--light a {
  color: var(--km-color-text-inverse);
}

.km-section--accent {
  background: color-mix(in srgb, var(--km-color-accent) 12%, var(--km-color-bg));
  border-block: var(--km-border-width) solid var(--km-color-border);
}

.km-stack {
  display: flex;
  flex-direction: column;
  gap: var(--km-space-md);
}

.km-stack--sm { gap: var(--km-space-sm); }
.km-stack--lg { gap: var(--km-space-lg); }

.km-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--km-space-sm);
}

.km-split {
  display: grid;
  gap: var(--km-space-lg);
}

.km-grid {
  display: grid;
  gap: var(--km-space-md);
}

.km-grid--2,
.km-grid--3,
.km-grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .km-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .km-split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

@media (min-width: 48rem) {
  .km-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

@media (min-width: 64rem) {
  .km-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}