main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

li {
  list-style: none;
}

.filter {
  grid-column: 1/2;
  font-weight: bold;
  position: sticky;
  top: 6rem;
  align-self: start;
}

.filter li {
  margin: inherit;
  padding: inherit;
  position: relative;
  font-weight: normal;
  text-transform: capitalize;
}

.filter li:has(a.active),
.filter li:hover {
  text-decoration: underline;
}

.products {
  --row-height: 22rem; /* target height of a row, tweak to taste */
  grid-column: 2 / 6;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 1rem;
  padding: 0;
  margin: 0;
}

/* Width follows the image shape: wide images grow more, tall ones less */
.product {
  flex-grow: var(--ratio);
  flex-shrink: 1;
  flex-basis: calc(var(--ratio) * var(--row-height));
  min-width: 0;
}

/* Keeps the last row from stretching its items across the full width */
.products::after {
  content: "";
  flex-grow: 999;
}

.product a {
  display: block;
}

.product-image {
  aspect-ratio: var(--ratio);
  overflow: hidden;
}

.product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-title {
  margin: 0.75rem 0 0;
}

.product-price {
  margin: 0.25rem 0 0;
}

@media (max-width: 1000px) {
  main {
    display: block;
  }

  .filter {
    width: 100%;
    margin-bottom: 2rem;
    top: 5rem;
  }

  .filter li {
    display: inline;
  }
}