.anchors ul {
  list-style-type: none;
  padding: 0;
  font-size: var(--font-size-0);
  margin-top: -0.5em;
}

.anchors--cards ul {
  display: grid;
  grid-gap: var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.anchors ul li {
 display: flex;
}

.anchors a {
  color: var(--wvib-red, inherit);
  font-size: var(--font-size-0);
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 0.5em 0;
}

.anchors a.card {
  padding: 0.75em 1em;
  color: white;
  font-family: var(--font-family-display, sans-serif);
  font-size: var(--font-size-1);
  width: 100%;
  height: 100%;
  align-items: flex-start;
}

.anchors a.card.card--gradient:hover {
  background-position: 45%;
  color: white;
}

.anchors a svg {
  margin-right: 2px; 
  transition: all .2s ease;
}

.anchors a.card svg {
  margin-top: 0.35em;
  margin-right: 0.5em;
  flex-shrink: 0;
}

.anchors a:hover {
  color: var(--wvib-blue);
}

.anchors a:hover svg {
  transform: translateX(3px);
}

a.card.card--gradient {
    transition: all .4s ease;
    background: linear-gradient(135deg, var(--wvib-red) 25%, var(--wvib-blue) 50%);
    background-size: 220%;
    background-position: 0%;
}

@supports (background-image: linear-gradient(in oklch to right, blue, red)) {
    a.card.card--gradient {
        background: linear-gradient(135deg in oklch, var(--wvib-red) 25%, var(--wvib-blue) 50%);
        background-size: 220%;
        background-position: 0%;
    }
}