.links {
  display: grid;
  gap: 1.6em;
  justify-items: center;
}

.links__link {
  border-radius: 0.4em;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-ink) 10%, transparent),    0 0 0.2em 0.2em color-mix(in oklch, var(--color-ink) 20%, transparent),    0 0 1em 0.5em color-mix(in oklch, var(--color-ink) 15%, transparent);
  padding: 1.6em;
  text-decoration: none;
  transition: box-shadow var(--transition);
  width: min(100%, 24em);
}

.links__link dl {
  display: grid;
  gap: 0.575em;
  margin-bottom: -0.25em;
  margin-top: -0.3125em;
}

.links__link dl dt,
.links__link dl dd {
  letter-spacing: normal;
}

.links__link dl dt {
  align-items: flex-start;
  display: flex;
  font-size: 180%;
  font-weight: 800;
  line-height: 1;
}

.links__link dl dt strong {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 0.0425em;
  text-underline-offset: 0.0525em;
}

.links__link dl dt .version {
  margin-left: 0.125em;
  margin-top: 0.175em;
}

.links__link dl dd {
  font-size: 100%;
  font-weight: 500;
  line-height: 1.2;
}



@media(hover: hover) {

  .links__link:focus,
    .links__link:hover {
    box-shadow: 0 0 0 1px color-mix(in oklch, var(
            --color-pink) 10%, transparent), 0 0 0.2em 0.2em color-mix(in oklch, var(--color-pink) 15%, transparent), 0 0 1em 0.5em color-mix(in oklch, var(--color-pink) 7%, transparent);
}


  .links__link:focus dl dt .version sup,
  .links__link:hover dl dt .version sup {
    background: var(--color-canvas-light);
    color: var(--color-blue);
  }

}



@media(min-width: 64em) {

  .links {
    grid-auto-flow: column;
  }

  .links__link {
    width: auto;
  }

}