.row {
  display: flex;
  gap: 1em;
  margin-block: 1em;
}
.swatch {
  flex: 0 1 200px;
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-block-start: 50%;
    background: var(--color);
  }
}
.swatch__name,
.swatch__hex {
  font-size: var(--step--1);
  display: block;
}
.swatch__hex {
  text-transform: uppercase;
  color: var(--neutral--darker);
}