.column-grid {
  position: absolute;
  inset: var(--column-grid-top, 0) 0 0;
  display: grid;
  grid-template-columns: repeat(var(--layout-columns), 1fr);
  gap: var(--layout-gutter);
}

.column-grid span {
  border-inline: 1px solid var(--grid-line-color);
  transition: background-color var(--duration-exit) var(--ease-out);
}

.column-grid span[data-active] {
  background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.column-grid span {
  transform-origin: top;
  animation: column-draw var(--duration-intro) var(--ease-out) backwards;
  animation-delay: calc(var(--column-index) * var(--duration-stagger));
}

.column-grid span:nth-child(1)  { --column-index: 0; }
.column-grid span:nth-child(2)  { --column-index: 1; }
.column-grid span:nth-child(3)  { --column-index: 2; }
.column-grid span:nth-child(4)  { --column-index: 3; }
.column-grid span:nth-child(5)  { --column-index: 4; }
.column-grid span:nth-child(6)  { --column-index: 5; }
.column-grid span:nth-child(7)  { --column-index: 6; }
.column-grid span:nth-child(8)  { --column-index: 7; }
.column-grid span:nth-child(9)  { --column-index: 8; }
.column-grid span:nth-child(10) { --column-index: 9; }
.column-grid span:nth-child(11) { --column-index: 10; }
.column-grid span:nth-child(12) { --column-index: 11; }

@keyframes column-draw {
  from {
    transform: scaleY(0);
  }
}

@media (width < 768px) {
  .column-grid span:nth-child(n + 5) {
    display: none;
  }
}