/* Herbruikbaar hexagon-masker — pointy-top, verhouding 275:304, licht afgeronde
   hoeken. clip-path kan niet afronden, daarom een SVG-masker (alpha).
   Gebruik: <img class="hex-avatar" style="width:64px"> — de hoogte volgt uit de
   aspect-ratio. Werkt op een <img> (object-fit:cover) of een gekleurde <span>
   (fallback-initiaal). Het masker schaalt uniform zolang het element de 275:304
   verhouding houdt (gegarandeerd door aspect-ratio). */
:root {
  --hex-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 275 304'%3E%3Cpath fill='%23000' d='M153.3 8.7 L259.2 67.3 Q275 76 275 94 L275 210 Q275 228 259.2 236.7 L153.3 295.3 Q137.5 304 121.7 295.3 L15.8 236.7 Q0 228 0 210 L0 94 Q0 76 15.8 67.3 L121.7 8.7 Q137.5 0 153.3 8.7 Z'/%3E%3C/svg%3E");
}
.hex-avatar {
  aspect-ratio: 275 / 304;
  -webkit-mask-image: var(--hex-mask);
          mask-image: var(--hex-mask);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}