.hero-product-swatch__container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}

.hero-product-swatch__list {
  list-style: none;
}

.hero-product-swatch__swatch {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  background-color: var(--swatch-color);
  border-radius: 50%;
  margin: 4px;
  padding: 4px;
  vertical-align: middle;
  appearance: none;
  outline: none;
  cursor: pointer;
}

.hero-product-swatch__swatch:checked::before {
  border: 1px solid black;
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}