/* /kontakt. Three destinations, no form -- #4 has settled no backend and a
   static site cannot post one. Built on the same row vocabulary as the rest of
   the site. */

.wr-ways {
  padding-block: clamp(var(--space-8), 13vh, 8rem);
}



/* The number is the content of this page, so it is set at display size and is
   itself the link -- on a phone the largest thing on screen is the thing you
   tap to call. */
.wr-way__value {
  display: inline-block;
  margin-block-start: var(--space-2);
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  text-decoration: none;
  /* Numbers in a stack should align on their digits, not drift with the
     proportional widths of 1 and 6. */
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-fast) var(--ease);
}

.wr-way__value:hover,
.wr-way__value:focus-visible {
  color: var(--color-accent-text);
}

.wr-way__note {
  margin-block-start: var(--space-3);
  max-inline-size: 40ch;
  font-size: var(--text-base);
  color: var(--color-ink-soft);
}

@media (min-width: 48rem) {
  

  .wr-way__label {
    grid-column: 1;
  }

  .wr-way__value {
    grid-column: 1;
    margin-block-start: var(--space-2);
  }

  .wr-way__note {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-block-start: 0;
  }
}