/* layout.css — containers, grids, spacing helpers */

.cr-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

@media (min-width: 1024px) {
  .cr-container { padding-inline: var(--sp-7); }
}

.cr-grid { display: grid; gap: var(--sp-5); }
.cr-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cr-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 767px) {
  .cr-grid--2, .cr-grid--3, .cr-grid--4 { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cr-grid--3, .cr-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.cr-stack > * + * { margin-top: var(--sp-5); }