.color-swatch .color-grid {display:flex;column-gap:10px;margin-top:10px;flex-wrap:wrap;row-gap:1rem;}
.color-swatch .swatch-item {height:auto;}
.color-swatch a {display:inline-flex;flex-direction:column;justify-content:center;text-align:center;font-size:12px;text-decoration:none;max-width:90px;line-height:1.3;border:1px solid #cccccc78;height:100%;border-radius:4px;overflow:hidden;padding:3px 10px;}
.color-swatch a.active {border:1px solid #000;}
.color-swatch img {max-width:50px;height:60px;object-fit:contain;margin:auto;}
.color-swatch span {color: #000;font-size: 12px;font-weight:500;line-height: 1.1;letter-spacing: 0;display:block;padding:5px 0;}

@media screen and (max-width: 749px) {
  .color-swatch .color-grid {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;}
  .color-swatch a {max-width: 100%;width: 100%;display: block;}
  .color-swatch img {max-width: 100%;}
}