.row {
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    text-align: center;
    margin: auto!important;
    container-type: inline-size;
}

.row > div {
    float:left;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    min-height:1px;
    margin-bottom:10px ;
    padding: 0px 10px;
    margin-left: auto;
    margin-right: auto;
}

.cuadricula:after {
    content:"";
    display:table;
    clear:both
}

.s1 > div {
    width:100%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s2 > div{
    width:50%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s3 > div {
    width:33.3%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s4 > div {
    width:25%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s5 > div {
    width:20%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s6 > div {
    width:16.6%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s7 > div {
    width:14.285%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s8 > div{
    width:12.5%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s9 > div {
    width:11.1%;
    margin-left:auto;
    left:auto;
    right:auto
}

.s10 > div {
    width:10%;
    margin-left:auto;
    left:auto;
    right:auto
}

@container (min-width: 601px) {
    .m1 > div {
        width:100%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .m2 > div {
        width:50%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .m3 > div {
        width:33.3%;
        margin-left:auto;
        left:auto;
        right:auto
    }
    .m4  > div{
        width:25%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .m5 > div {
        width:20%;
        margin-left:auto;
        left:auto;
        right:auto
    }
    .m6 > div {
        width:16.6%;
        margin-left:auto;
        left:auto;
        right:auto
    }
    
    .m7 > div {
        width:14.2%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .m8 > div {
        width:12.5%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .m9 > div {
        width:11.1%;
        margin-left:auto;
        left:auto;
        right:auto
    }
    .m10 > div {
        width:10%;
        margin-left:auto;
        left:auto;
        right:auto
    }
}

@container (min-width: 1202px) {
    .l1 > div {
        width:100%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .l2 > div {
        width:50%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .l3 > div {
        width:33.3%;
        margin-left:auto;
        left:auto;
        right:auto
    }
    .l4  > div{
        width:25%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .l5 > div {
        width:20%;
        margin-left:auto;
        left:auto;
        right:auto
    }
    .l6 > div {
        width:16.6%;
        margin-left:auto;
        left:auto;
        right:auto
    }
    
    .l7 > div {
        width:14.2%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .l8 > div {
        width:12.5%;
        margin-left:auto;
        left:auto;
        right:auto
    }

    .l9 > div {
        width:11.1%;
        margin-left:auto;
        left:auto;
        right:auto
    }
    .l10 > div {
        width:10%;
        margin-left:auto;
        left:auto;
        right:auto
    }
}