.categories,
.products{
  display:grid;
  gap:16px;
}

.categories{
  grid-template-columns:repeat(2, minmax(0,1fr));
}

.products{
  grid-template-columns:1fr;
}

.category-card{
  min-height:108px;
  display:flex;
  align-items:end;
  justify-content:flex-start;
  padding:16px;
  font-size:18px;
  font-weight:900;
  color:var(--color-white);
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.5)),
    linear-gradient(135deg, var(--color-primary), #f08d23);
  box-shadow:var(--shadow-soft);
}

.category-card:nth-child(2){
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.5)),
    linear-gradient(135deg, #c62828, #ffca28);
}

.category-card:nth-child(3){
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.5)),
    linear-gradient(135deg, #8d3b1f, #d7262e);
}

.category-card:nth-child(4){
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.5)),
    linear-gradient(135deg, #2e7d32, #ffd54a);
}

.product-card{
  padding:0 0 16px;
}

.product-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  background:#ead8bd;
}

.product-card h3{
  padding:14px 16px 6px;
  font-size:20px;
  line-height:1.1;
  color:var(--color-dark);
}

.product-card p{
  padding:0 16px;
  font-size:18px;
  font-weight:800;
  color:var(--color-primary);
}

@media (min-width:768px){
  .categories{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }

  .products{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .category-card{
    min-height:130px;
    font-size:20px;
  }

  .product-card img{
    height:260px;
  }
}