style.module.css

.cards {
  display: grid;
  --rows: 3;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)
  );
}

.card:hover svg {
  color: currentColor;
}

.card svg {
  width: 1.5rem;
  color: #00000033;
  transition: color 0.3s ease;
}

.card p {
  margin-top: 0.5rem;
}

.card .title {
  display: flex;
  font-weight: 600;
  align-items: flex-start;
}

:global(.dark) .card {
  background-color: hsl(var(--nextra-primary-hue) 10% 12%/0.9);
}
:global(.dark) .card:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
:global(.dark) .card svg {
  color: #ffffff66;
}
:global(.dark) .card:hover svg {
  color: currentColor;
}