.main-grid {
  --cols: 1;

  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: minmax(var(--grid-row-height), auto);
  grid-auto-flow: row dense;
  gap: var(--spacing-md);
  max-width: var(--grid-max-width);
  margin-inline: auto;
  padding: var(--spacing-md);

  @media (width >= 640px) {
    --cols: 2;
  }

  @media (width >= 1024px) {
    --cols: 4;
  }

  /* No max width: wider screens get more columns, so tiles stay roughly 300–400px wide */
  @media (width >= 1600px) {
    --cols: 5;
  }

  @media (width >= 2000px) {
    --cols: 6;
  }

  @media (width >= 2400px) {
    --cols: 7;
  }
}