@layer blocks {
  .color-families {
    background-color: var(--theme-surface-primary);
  }
  .color-families__inner {
    row-gap: 0;
    padding-block: 4rem;
  }
  @media (min-width: 1024px) {
    .color-families__inner {
      padding-block: 6.5rem;
    }
  }
  .color-families__description {
    grid-row-start: 2;
    margin-top: 1rem;
  }
  .color-families__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 4rem;
  }
  @media (min-width: 1024px) {
    .color-families__grid {
      grid-template-columns: repeat(5, 1fr);
      --color-swatch-card-padding: 1rem;
    }
  }
  .color-families__grid .color-swatch-card-image__name {
    text-transform: capitalize;
  }
}