.grid {
  /* 2 / √3 */
  --ratio: 1.1547;
  --gap: 10px;
  --cols: 5;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 165px));
  place-content: center;
  width: 100%;
  padding: 40px;
  gap: calc(var(--gap) / var(--ratio)) var(--gap);
}

.cell {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  aspect-ratio: var(--ratio) / 1;
  transform: translateX(
    calc(var(--offset) * 25% + (var(--offset) * var(--gap)) / 4)
  );
  filter: drop-shadow(1px 2px 5px #00000020);
}

.cell > * {
  position: absolute;
}

.outline {
  fill: none;
  stroke-width: 0.025;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: calc(100% + var(--gap));
  overflow: visible;
  pointer-events: none;
}

.cell:has(.link:hover, .link:focus) .outline {
  animation: outline 1s linear;
  --point1: 50% -100%;
  --point2: -79.904% -25%;
  --point3: -79.904% 125%;
  --point4: 50% 200%;
  --point5: 179.904% 125%;
  --point6: 179.904% -25%;
}

@keyframes outline {
  0%,
  100% {
    clip-path: polygon(50% 50%, var(--point6), var(--point2));
  }
  16.6% {
    clip-path: polygon(50% 50%, var(--point1), var(--point3));
  }
  33.3% {
    clip-path: polygon(50% 50%, var(--point2), var(--point4));
  }
  50% {
    clip-path: polygon(50% 50%, var(--point3), var(--point5));
  }
  66.6% {
    clip-path: polygon(50% 50%, var(--point4), var(--point6));
  }
  83.3% {
    clip-path: polygon(50% 50%, var(--point5), var(--point1));
  }
  0%,
  100% {
    stroke: transparent;
  }
  10% {
    stroke: var(--dark);
  }
  50% {
    stroke: var(--mid);
  }
  90% {
    stroke: var(--light);
  }
}

.link {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / var(--ratio);
  width: 100%;
  min-height: 0;
  gap: 5px;
  text-align: center;
  overflow-wrap: anywhere;
  animation: link 1s var(--delay) backwards var(--play);
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  transition: background var(--fast), opacity var(--fast);
}

.link:hover,
.link:focus {
  background: var(--dark);
}

@keyframes link {
  from {
    opacity: 0;
  }
}

.link > * {
  position: absolute;
  pointer-events: none;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--fast), filter var(--fast);
}

.grid:has(.link:hover, .link:focus) .image {
  filter: contrast(0.5);
  opacity: 0.1;
}

.name {
  position: relative;
  top: -0.1em;
  padding: 20px 10px;
  overflow: hidden;
  font-size: 1.1rem;
  opacity: 0;
  transition: color var(--fast), opacity var(--fast), transform var(--fast);
}

.link:hover .name,
.link:focus .name {
  color: var(--white);
}

.grid:has(.link:hover, .link:focus) .name {
  opacity: 1;
}

.tooltip {
  box-sizing: content-box;
  position: absolute;
  bottom: calc(100% * var(--ratio) + var(--gap));
  width: 200%;
  max-width: 50vw;
  padding: 10px 15px;
  border-radius: 5px;
  background: var(--dark);
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast), transform var(--fast);
}

.cell:has(.link:hover, .link:focus) .tooltip {
  transform: translateY(calc(-0.5 * var(--gap)));
  opacity: 1;
  transition-delay: 200ms;
}

.tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(-135deg);
  background: var(--dark);
  content: "";
  color: var(--white);
  clip-path: polygon(-50% -50%, 150% -50%, -50% 150%);
  pointer-events: none;
  transition: opacity var(--fast), transform var(--fast);
}

.tooltip-content {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  overflow: hidden;
  text-align: center;
  text-wrap: balance;
}