/* =====================================================
   PRODUCT GRID LAYOUT
   ===================================================== */

.products {
    display: grid;
    gap: var(--product-grid-gap);
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--section-padding-x);
    list-style: none;

    justify-content: start;     /* Wichtig: links ausrichten */
    justify-items: stretch;
}

.related.products{
    grid-column:1 / -1;
    padding:0;
}



/* =====================================================
   DESKTOP (≥1024px)
   3 Spalten
   ===================================================== */

@media (min-width: 1024px) {
    .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =====================================================
   TABLET
   2 Spalten
   ===================================================== */

@media (min-width: 640px) and (max-width: 1023px) {
    .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   MOBILE
   1 Spalte
   ===================================================== */

@media (max-width: 639px) {
    .products {
        grid-template-columns: 1fr;
    }
}