@layer layout {
  .container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--space-sm);
  }

  .section {
    padding-block: var(--space-xl);
  }

  /* Grid Utilities */
  .grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: var(--space-lg);
  }

  .grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }

  /* Subgrid ready property grid */
  .property-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
  }

  @media (min-width: 1024px) {
    .property-cards-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Container query context */
  .card-wrapper {
    container-type: inline-size;
  }
}