<style>
  .products-module { 
    padding: 20px 0; 
    width: 100%;
    box-sizing: border-box;
  }
  
  .products-module * {
    box-sizing: border-box;
  }
  
  .products-grid {
    display: flex;
    flex-wrap: wrap;
    /* Use the gap variable from module settings */
    gap: var(--card-gap, 24px);
    justify-content: flex-start;
    width: 100%;
  }

  .product-card {
    /* STRICT 3-COLUMN MATH: */
    /* Width = (100% - (Gap * 2)) / 3 */
    /* We subtract (Gap * (Columns - 1)) from 100%, then divide by Columns */
    width: calc((100% - (var(--card-gap, 24px) * 2)) / 3);
    margin: 20px;
    
    /* Disable growing/shrinking to force strict columns */
    flex-grow: 0;
    flex-shrink: 0;
    
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: transform 0.2s;
  }
  
  .product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

  .product-card__image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 66%; /* 3:2 Ratio (Standard photo look) */
    background-color: #eee;
  }

  .product-card__image {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
  }

  .product-card__content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
  .product-card__title { margin: 0 0 10px; font-size: 1.2rem; font-weight: 700; color: #33475b; }
  .product-card__desc { font-size: 0.95rem; color: #666; line-height: 1.5; }

  /* Tablet: 2 per row */
  @media (max-width: 991px) {
    .product-card {
      width: calc((100% - var(--card-gap, 24px)) / 2);
    }
  }

  /* Mobile: 1 per row */
  @media (max-width: 575px) {
    .product-card {
      width: 100%;
    }
  }
</style>
