/* Dotty Retro DS · layout.css */

/* ─────────────────────────────────────────
   11. LAYOUT
   ───────────────────────────────────────── */
.ds-wrap {
  max-width: var(--ds-max);
  margin: 0 auto;
  padding: 0 16px;
}
.ds-stack { display: flex; flex-direction: column; gap: 14px; }
.ds-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.ds-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.ds-row.center { justify-content: center; }
.ds-grid-2 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: center;
}
.ds-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ds-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
/* 5 cards · Olympic rings: 3 on top, 2 offset below */
.ds-olympics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ds-olympics > * {
  grid-column: span 2;
}
.ds-olympics > *:nth-child(4) {
  grid-column: 2 / span 2;
}
.ds-olympics > *:nth-child(5) {
  grid-column: 4 / span 2;
}
@media (max-width: 800px) {
  .ds-grid-2, .ds-grid-3 { grid-template-columns: 1fr; }
  .ds-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ds-olympics {
    grid-template-columns: 1fr;
  }
  .ds-olympics > *,
  .ds-olympics > *:nth-child(4),
  .ds-olympics > *:nth-child(5) {
    grid-column: 1;
  }
}

.ds-media {
  border: 1px solid var(--ds-rule);
  border-radius: 3px;
  box-shadow: var(--ds-shadow);
}