.cases {
  display: grid;
  gap: var(--s-md-space);
}
.cases__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm-space);
}
.cases__list > * {
  display: flex;
  gap: var(--s-sm-space);
  padding: var(--p-typical);
  background-color: var(--c-background-primary);
  color: var(--c-text-primary);
  border-radius: var(--s-dl-space);
  border: solid var(--border-thickness) var(--c-background-quaternary);
  font-size: var(--f-size-small);
  font-weight: var(--f-weight-bold);
}
.cases__list > *::before {
  content: "";
  width: 1.5em;
  display: inline-block;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m8 9.524l.976.837l2.988 2.56a.325.325 0 0 0 .536-.246V4.5A1.5 1.5 0 0 0 11 3H5a1.5 1.5 0 0 0-1.5 1.5v8.175a.325.325 0 0 0 .536.247l2.988-2.56zM14 4.5a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v8.175a1.825 1.825 0 0 0 3.013 1.386L8 11.5l2.987 2.56A1.825 1.825 0 0 0 14 12.676z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-color: var(--c-accent-primary);
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}