#products_main{
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5) 0}
/* product grid */
#products_list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4)}
/* product card */
#products_list .card{
  display: grid}
#products_list .card img{
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  object-fit: cover;
  width: 100%}
#products_list .card h3{
  color: var(--gray-900);
  font-size: var(--fs-md);
  margin: 0}
#products_list .card .price{
  color: var(--green-700);
  font-weight: bold;
  min-width:0}