/* MTG Shared Render Matrix: mtg-home-template-carousel-final */


/* =========================================================
   DESKTOP — 4 POR FILA
   ========================================================= */

html body .mdg-templates .mdg-wrap.mdg-template-grid{
    display:grid !important;
    grid-template-columns:
        repeat(4,minmax(0,1fr)) !important;
    gap:20px !important;
    align-items:stretch !important;
}

html body .mdg-templates .mdg-template-grid .mdg-template-card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
}


/* =========================================================
   OCTAVA CARD — VER TODAS
   ========================================================= */

.mdg-templates
.mdg-template-card:nth-child(8){
    position:relative;
}

.mdg-templates
.mdg-template-card:nth-child(8)
.mdg-template-preview{
    min-height:190px;
    display:flex !important;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(255,255,255,.28),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #0b1736,
            #1677ff
        ) !important;
}

.mdg-templates
.mdg-template-card:nth-child(8)
.mdg-template-preview img{
    display:none !important;
}

.mdg-templates
.mdg-template-card:nth-child(8)
.mdg-template-preview::before{
    content:"Explorar todos los diseños →";
    display:block;
    padding:24px;
    color:#fff;
    font-size:21px;
    line-height:1.15;
    font-weight:900;
    letter-spacing:-.035em;
    text-align:center;
}

.mdg-templates
.mdg-template-card:nth-child(8)
.mdg-template-preview > span{
    display:none !important;
}


/* =========================================================
   TABLET — 2 POR FILA
   ========================================================= */

@media (max-width:900px) and (min-width:521px){

    html body .mdg-templates .mdg-wrap.mdg-template-grid{
        display:grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap:16px !important;
    }
}


/* =========================================================
   DOTS
   ========================================================= */

.mtg-template-carousel-dots{
    display:none;
}


/* =========================================================
   MOBILE — CARRUSEL
   ========================================================= */

@media (max-width:520px){

    .mdg-templates{
        overflow:hidden;
    }

    html body .mdg-templates .mdg-wrap.mdg-template-grid{
        display:flex !important;

        grid-template-columns:none !important;

        width:100% !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        gap:14px !important;

        padding-right:38px !important;
        padding-bottom:6px !important;

        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;

        overscroll-behavior-x:contain;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;
    }

    .mdg-templates
    .mdg-template-grid::-webkit-scrollbar{
        display:none;
    }

    html body .mdg-templates .mdg-template-grid .mdg-template-card{
        flex:
            0 0
            calc(100% - 40px) !important;

        width:
            calc(100% - 40px) !important;

        min-width:
            calc(100% - 40px) !important;

        max-width:
            calc(100% - 40px) !important;

        scroll-snap-align:start;
        scroll-snap-stop:always;
    }

    .mtg-template-carousel-dots{
        display:flex;
        align-items:center;
        justify-content:center;

        gap:7px;

        margin:18px auto 0;

        min-height:22px;
    }

    .mtg-template-carousel-dot{
        display:block;

        width:7px;
        height:7px;

        margin:0;
        padding:0;

        border:0;
        border-radius:99px;

        background:#cbd5e1;

        cursor:pointer;

        transition:
            width .20s ease,
            transform .20s ease,
            background .20s ease;
    }

    .mtg-template-carousel-dot.is-active{
        width:23px;
        background:#1677ff;
    }

    .mtg-template-carousel-dot:focus-visible{
        outline:2px solid #1677ff;
        outline-offset:3px;
    }

    .mdg-templates
    .mdg-template-card:nth-child(8)
    .mdg-template-preview{
        min-height:210px;
    }
}