:root{
    --base: 1600;
    --tbase: calc(var(--base) * 1px);
    --tcoluma: calc(var(--base) / 12);
    --pcolumna: calc(var(--tcoluma)/var(--base) * 100%);
    --colorTexto: rgb(199, 199, 199);
    --colorFondo: rgb(14, 14, 14);
}

*{
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.wrapper{
    width: 100%;
    max-width: var(--tbase);
    margin: 0 auto;
}

.row{
    clear: both;
}

.ml-1{
    margin-left: var(--pcolumna);
}

.mr-1{
    margin-right: var(--pcolumna);
}

.ml-2{
    margin-left: calc(var(--pcolumna) * 2);
}

.mt-1{
    margin-top: var(--pcolumna);
}

.mb-1{
    margin-bottom: var(--pcolumna);
}

.mt-2{
    margin-top: calc(var(--pcolumna) * 2);
}

.mt-3{
    margin-top: calc(var(--pcolumna) * 3);
}

.mt-4{
    margin-top: calc(var(--pcolumna) * 4);
}

.col-2{
    width: calc(var(--pcolumna) * 2);
    float: left;
}

.col-3{
    width: calc(var(--pcolumna) * 3);
    float: left;
}

.col-4{
    width: calc(var(--pcolumna) * 4);
    float: left;
}


.col-6{
    width: calc(var(--pcolumna) * 6);
    float: left;
}

.col-9{
    width: calc(var(--pcolumna) * 9);
    float: left;
}

.col-10{
    width: calc(var(--pcolumna) * 10);
    float: left;
}

.col-12{
    width: calc(var(--pcolumna) * 12);
    float: left;
}