ul.swatch{--special-span: 3;display:grid;grid-gap:var(--gap);grid-auto-flow:dense;grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));grid-auto-rows:minmax(90px, 1fr)}ul.swatch li{display:flex;place-items:center;place-content:center;flex-direction:column;text-align:center;color:#fff;font-size:0.9375em;line-height:1.3;border-radius:var(--border-radius, 6px)}ul.swatch li:not(:last-of-type){padding:var(--gap) !important}ul.swatch li.light{color:#1e1a1a}ul.swatch li[data-type=material]{background-repeat:no-repeat;background-size:cover;background-position:center;text-shadow:0px 0px 3px #000;font-weight:bold}ul.swatch li[data-type=special]{display:grid;place-items:initial;text-align:left;flex-grow:1;padding:calc(var(--gap) * 2);font-size:0.75em;line-height:1.6;color:rgba(255,255,255,.8);grid-column-end:span var(--special-span)}ul.swatch li[data-type=special] p:first-of-type{margin-bottom:calc(var(--gap) * 0.5);color:#fff;font-size:1.125em}ul.swatch li[data-type=special] img{border-radius:var(--border-radius, 6px)}ul.swatch li[data-type=special] svg{color:rgba(255,255,255,.5)}ul.swatch li[data-type=special] svg,ul.swatch li[data-type=special] img{width:70px;grid-column:1;grid-row:1/span 3;margin-right:var(--gap);margin-bottom:0}ul.swatch li[data-type=special]>*{grid-column:2}@media(max-width: 480px){ul.swatch{grid-template-columns:repeat(2, 1fr)}ul.swatch li[data-type=special]{--special-span: 2}}