.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--xxlarge) * 4), 1fr));
  grid-auto-rows: auto;
  grid-gap: var(--medium);
}

.card {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: var(--large) var(--medium);
  border-radius: var(--xlarge);
  box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
}

.card-link a {
  color: var(--black);
  text-decoration: none;
}

.card-category-image {
  max-height: var(--gigantic);
  max-width: var(--gigantic);
}