/**
 * Shared containers, sections and responsive grid primitives.
 *
 * Layout utilities define geometry only; visual component styles live in
 * ../components.
 */

.cp-container,
.container {
  width: min(100% - 2rem, 1240px);
  margin-inline: auto;
}

.cp-section,
.section {
  padding-block: clamp(4rem, 7vw, 7rem);
}

.cp-section--soft,
.section-soft {
  background: var(--cp-soft);
}

.cp-grid {
  display: grid;
  gap: 1.5rem;
}

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

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

.cp-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}