.links {

  display: grid;
  gap: 1.6em;
  justify-items: center;

  .links__link {

    border-radius: 0.4em;
    box-shadow: 0 0 0 1px rgba(var(--rgb-white), 0.2);
    padding: 1.6em;
    text-decoration: none;
    transition: box-shadow var(--transition);
    width: min(100%, 24em);

    dl {

      display: grid;
      gap: 0.575em;
      margin-bottom: -0.25em;
      margin-top: -0.3125em;

      dt,
      dd {
        letter-spacing: normal;
      }

      dt {

        align-items: flex-start;
        display: flex;
        font-size: 180%;
        font-weight: 800;
        line-height: 1;

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

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

      }

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

    }

  }

  @media(hover: hover) {

    .links__link {

      &:focus,
      &:hover {

        box-shadow: 0 0 0 1px var(--color-white);

        dl dt .version sup {
          background: var(--color-white);
          color: var(--color-blue);
        }

      }

    }

  }

  @media(min-width: 64em) {

    grid-auto-flow: column;

    .links__link {
      width: auto;
    }

  }

}