.palette-mockup__swatches {

  
  & {
    --min: 2.5rem;
    
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr));
    grid-template-rows: 1fr;
    gap: var(--grid-gap, 1em);
  }

  
  gap: calc(var(--card-gap) / 2);
}

.palette-mockup__swatch {
  inline-size: 100%;
  aspect-ratio: 3/1;
  background: var(--bg);
  border-radius: var(--radius);
  border: var(--border);

  &:nth-child(1) {
    --bg: var(--color-value);
  }

  &:nth-child(2) {
    --bg: oklch(from var(--color-value) 0.35 c h);
  }

  &:nth-child(3) {
    --bg: oklch(from var(--color-value) 0.45 c h);
  }

  &:nth-child(4) {
    --bg: oklch(from var(--color-value) 0.65 c h);
  }

  &:nth-child(5) {
    --bg: oklch(from var(--color-value) 0.8 c h);
  }

  &:nth-child(6) {
    --bg: oklch(from var(--color-value) 0.95 c h);
  }
}