/* @group @variables */

[class*="a-color-list"] {
--grid-template-columns: repeat(auto-fit, minmax(4.5rem, 6.75rem));
}

/* @end @variables */

/* @group @a-color-list */

[class*="a-color-list"] {
display: grid;
justify-content: start;
grid-template-columns: var(--grid-template-columns);
gap: .375rem;
}

/* @end @a-color-list */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-color-thumbnail"] {
--paragraph-line-height: var(--line-height);
--font-weight: 300;
--font-variation-settings: "wght" 300;
}

/* @end @variables */

/* @group @a-color-thumbnail */

[class*="a-color-thumbnail"] {
display: grid;
justify-content: start;
align-items: center;
grid-auto-flow: column;
gap: .375rem;
}

/* @end @a-color-thumbnail */