div.item-grid-row {
  margin-bottom: 40px;
}

div.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 15px;
}

div.item-grid-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid #cacaca;
  background-color: white;
}

div.item-grid-card a.item-grid-image {
  display: block;
  text-align: center;
}

div.item-grid-card a.item-grid-image img {
  max-width: 100%;
  height: auto;
}

div.item-grid-card p.item-grid-title {
  margin: 10px 0;
  flex-grow: 1;
}

/* price, btw, quantity and cart button styling comes from main.css (div.item-shopping) */
div.item-grid-card div.item-shopping div.price-input-container {
  padding-left: 0;
}

/* always keep the quantity control and cart button on one line, also where main.css stacks them */
div.item-grid-card div.shopping-inputs {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* smaller quantity control and cart button than on the item page */
div.item-grid-card div.quantity-buttons {
  width: 114px;
  float: none;
  flex-shrink: 0;
  margin-bottom: 0;
}

div.item-grid-card div.quantity-buttons input,
div.item-grid-card div.quantity-buttons button {
  width: 38px;
  height: 36px;
}

div.item-grid-card div.item-shopping input.shopping-cart {
  width: 70px;
  height: 36px;
  margin-left: 10px;
  font-size: 20px;
}

@media only screen and (min-width: 900px) {
  div.item-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}