:root {
  --mav-products-gap: 32px;
  --mav-product-desktop-gap-count: 3;
  --mav-product-desktop-columns: 4;
  --mav-product-narrow-columns: 2;
  --mav-products-tablet-gap: 24px;
  --mav-products-mobile-gap: 16px;
  --mav-product-title-size: 24px;
  --mav-product-mobile-title-size: 20px;
  --mav-product-caption-size: 12px;
  --mav-product-body-size: 16px;
  --mav-product-label-spacing: .12em;
  --mav-product-copy-gap: 8px;
  --mav-product-image-gap: 16px;
  --mav-product-title-line: 1.2;
  --mav-product-body-line: 1.6;
  --mav-product-full: 100%;
  --mav-product-zero: 0;
  --mav-product-weight: 400;
}
.mav-products { display:flex; flex-wrap:wrap; gap:var(--mav-products-gap); }
.mav-product { display:flex; flex-direction:column; gap:var(--mav-product-copy-gap); width:calc((var(--mav-product-full) - var(--mav-product-desktop-gap-count) * var(--mav-products-gap)) / var(--mav-product-desktop-columns)); }
.mav-product-image { display:block; margin-bottom:var(--mav-product-image-gap); }
.mav-product-image img { display:block; width:var(--mav-product-full); height:auto; }
.mav-product-type { margin:var(--mav-product-zero); color:var(--ast-global-color-3); font-size:var(--mav-product-caption-size); letter-spacing:var(--mav-product-label-spacing); text-transform:uppercase; }
.mav-product-title { margin:var(--mav-product-zero); font-size:var(--mav-product-title-size); font-weight:var(--mav-product-weight); line-height:var(--mav-product-title-line); }
.mav-product-title a { color:var(--ast-global-color-2); text-decoration:none; }
.mav-product-price { margin:var(--mav-product-zero); font-size:var(--mav-product-body-size); line-height:var(--mav-product-body-line); color:var(--ast-global-color-3); }
@media (max-width:1024px) {
  .mav-products { gap:var(--mav-products-tablet-gap); }
  .mav-product { width:calc((var(--mav-product-full) - var(--mav-products-tablet-gap)) / var(--mav-product-narrow-columns)); }
}
@media (max-width:767px) {
  .mav-products { gap:var(--mav-products-mobile-gap); }
  .mav-product { width:calc((var(--mav-product-full) - var(--mav-products-mobile-gap)) / var(--mav-product-narrow-columns)); }
  .mav-product-title { font-size:var(--mav-product-mobile-title-size); }
}