@layer components {
  .color-card-grid {
    --color-card-grid-gap: 0.5rem;
    --color-card-grid-cols: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--color-card-grid-gap);
  }
  .color-card-grid__item {
    min-width: 0;
    flex: 0 0 auto;
    width: calc((100% - (var(--color-card-grid-cols) - 1) * var(--color-card-grid-gap)) / var(--color-card-grid-cols));
  }
  .color-card-grid__item[data-state=open] {
    width: 100%;
    z-index: 1;
  }
  .color-card-grid--virtualized .color-card-grid__item {
    content-visibility: auto;
    contain-intrinsic-size: auto 13.75rem auto 13.75rem;
  }
  .color-card-grid--virtualized .color-card-grid__item:focus-within {
    content-visibility: visible;
  }
  .color-card-grid--virtualized .color-card-grid__item[data-state=open] {
    content-visibility: visible;
  }
}