Adding CSS for colour swatches on Shopify collection pages using metafields

component-card.css

.color-options {
  display:flex;
  margin-left:-2px;
  flex-wrap:wrap;
}

.color-options__item {
  width:14px;
  height:14px;
  flex-shrink:0;
  margin:2px;
  border-radius:50%;
  border:1px solid;
  border-color:rgba(18, 18, 18, 0.04);
}

@media screen and (min-width: 990px) {
  .color-options {
    margin-left:-3px;
  }
  
  .color-options__item {
    width:20px;
    height:20px;
    margin:3px;
  }
}