/* Layout primitives and responsive structure. */
.container {
  width: min(1140px, 100%);
  margin-inline: auto;
}
.grid {
  display: grid;
  gap: 1.5rem;
}
.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.section-split {
  display: grid;
  gap: 2rem;
}
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .section-split {
    grid-template-columns: 1fr;
  }
}
.header-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}