.category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.category-grid > .category-card,
.category-grid > .category-card:nth-child(1),
.category-grid > .category-card:nth-child(5) {
  grid-column: auto;
  height: 160px;
  padding: 24px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(21, 54, 90, .05);
}

.category-grid > .category-card span,
.category-grid > .category-ink span,
.category-grid > .category-blue span {
  color: var(--muted);
}

.category-grid > .category-card:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  box-shadow: 0 16px 38px rgba(21, 54, 90, .11);
}

.category-grid > .category-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 3px;
}

@media (max-width: 850px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .category-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .category-grid > .category-card,
  .category-grid > .category-card:nth-child(1),
  .category-grid > .category-card:nth-child(5) {
    height: 148px;
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-grid > .category-card {
    transition: none;
  }

  .category-grid > .category-card:hover {
    transform: none;
  }
}