/* ==========================================================================
   Spaces index — reuses the home page's tile design
   ========================================================================== */

.sx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sx-grid > .tile { aspect-ratio: 4 / 3; }
.sx-grid__lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.sx-note { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); }
.sx-note .alt-row__cta { margin-left: 6px; white-space: nowrap; }

@media (max-width: 1023px) {
  .sx-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .sx-grid__lead { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; }
}

@media (max-width: 767px) {
  .sx-grid { grid-template-columns: 1fr; }
  .sx-grid > .tile, .sx-grid__lead { aspect-ratio: 3 / 2; }
  .sx-note { margin-top: 32px; }
  .sx-note .alt-row__cta { display: block; margin-left: 0; margin-top: 12px; }
}