/**
 * Layout de cards — preset «Comercial» (Gians commercial)
 * Fuente: https://giansvisuals.com/commercial (Squarespace GalleryGrid)
 *
 *   aspect-ratio anamorphic-widescreen → 12 / 5
 *   3 columnas (≥769px) / 2 columnas (≤768px)
 *   gap + padding lateral: 0.5vw
 *
 * Se activa con body.portfolio-cards-layout-comercial
 * (también body.portfolio-comercial por retrocompatibilidad).
 */

body.portfolio-cards-layout-comercial .bloquejuegos .portafolio,
body.portfolio-comercial .bloquejuegos .portafolio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0.5vw;
    grid-row-gap: 0.5vw;
    gap: 0.5vw;
    padding: 0vw 0.5vw;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    box-sizing: border-box;
}

body.portfolio-cards-layout-comercial .bloquejuegos .portafolio .portafolioArt figure,
body.portfolio-comercial .bloquejuegos .portafolio .portafolioArt figure {
    aspect-ratio: 12 / 5;
    width: 100%;
}

@media screen and (max-width: 768px) {
    body.portfolio-cards-layout-comercial .bloquejuegos .portafolio,
    body.portfolio-comercial .bloquejuegos .portafolio {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 0.5vw;
        grid-row-gap: 0.5vw;
        gap: 0.5vw;
        padding: 0vw 0.5vw;
        margin-top: 0;
    }

    body.portfolio-cards-layout-comercial .bloquejuegos .portafolio .portafolioArt figure,
    body.portfolio-comercial .bloquejuegos .portafolio .portafolioArt figure {
        aspect-ratio: 12 / 5;
    }
}