.swatch--6 {
  background:
    linear-gradient(135deg, #6e817a, #dce2df 50%, #82948d),
    repeating-linear-gradient(45deg, transparent 0, transparent 6px, #9de4ff44 7px, #9de4ff44 9px);
}

.swatch--7 {
  background: linear-gradient(120deg, #a8c8cf, #f8ffff 42%, #8eaeb7 47%, #d9f4fa);
}

.swatch--8 {
  background:
    linear-gradient(45deg, transparent 0, transparent 55%, #8fdcff66 56%, #c4f3ff99 70%, transparent 71%),
    repeating-linear-gradient(100deg, #78918a 0, #dce9e5 1px, #8ca39c 3px);
}

.surface-reference__list {
  grid-template-columns: repeat(3, 1fr);
}

.surface-chip--6 {
  background:
    linear-gradient(45deg, transparent 0, transparent 55%, #8fdcff66 56%, #c4f3ff99 70%, transparent 71%),
    repeating-linear-gradient(100deg, #78918a 0, #dce9e5 1px, #8ca39c 3px);
}

@media (max-width: 900px) {
  .surface-reference__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .surface-reference__list {
    grid-template-columns: 1fr;
  }
}

.filter {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .filter {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 580px) {
  .filter {
    grid-template-columns: 1fr;
  }
}