/* ==========================================================================
   404: compacte hero (blok hero) met daaronder de snelkoppelingen naar de diensten.
   ========================================================================== */

.page-404__links {
  display: grid;
  gap: var(--sp-6);
}

.page-404__links ul {
  border-top: var(--border-hairline-w) solid var(--border-hairline);
}

.page-404__links li {
  border-bottom: var(--border-hairline-w) solid var(--border-hairline);
}

.page-404__links a {
  display: block;
  padding-block: var(--sp-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  font-stretch: calc(var(--wdth-heading) * 1%);
  text-decoration: none;
}

.page-404__links a:hover {
  color: var(--color-primary-dark);
}

@media (min-width: 64em) {
  .page-404__links {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }

  .page-404__links > :first-child {
    grid-column: span 5;
  }

  .page-404__links ul {
    grid-column: 7 / span 6;
  }
}