/* Legacy grid wrapper for existing BBQ widget content only.
   The card's inner styling now lives in jwa-product-card.css. New pages
   should lay out Product Card widgets using SiteOrigin rows/columns. */

.bbqs {
  display:flex;
  flex-direction:row;
  gap: 50px;
  flex-wrap: wrap;
}

.bbqs .product-card { width: calc( 33.3333% - 34px); }

@media screen and (max-width: 780px) {
  .bbqs { gap: 30px; }
  .bbqs .product-card {  width: 80%; max-width: 400px; margin: 0 auto;}
}