.ctn {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px;
}

@media (max-width: 991px) {
    .ctn {
        padding: 0 20px!important;
    }
}

.ctn-f {
    max-width: 100%;
    margin: 0 auto;
}

.r {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px;
}

.r.g-0{
    gap:0!important
}

.r.g-1{
    gap:1%!important
}

.r.g-2{
    gap:2%!important
}

.r.g-3{
    gap:3%!important
}

.r.g-4{
    gap:4%!important
}

.r.g-5{
    gap:5%!important
}

.r.g-10{
    gap:10%!important
}

.r.g-15{
    gap:15%!important
}

.r.g-20{
    gap:20%!important
}

.r.g-25{
    gap:25%!important
}

.c {
    text-align: center;
    border-radius: 5px;
}

/* Tamaños de columna por defecto (XL) */
.c-xl-0 { display: none; }
.c-xl-1 { grid-column: span 1; }
.c-xl-2 { grid-column: span 2; }
.c-xl-3 { grid-column: span 3; }
.c-xl-4 { grid-column: span 4; }
.c-xl-5 { grid-column: span 5; }
.c-xl-6 { grid-column: span 6; }
.c-xl-7 { grid-column: span 7; }
.c-xl-8 { grid-column: span 8; }
.c-xl-9 { grid-column: span 9; }
.c-xl-10 { grid-column: span 10; }
.c-xl-11 { grid-column: span 11; }
.c-xl-12 { grid-column: span 12; }

/* Estilos responsivos para pantallas grandes (LG) */
@media (max-width: 1200px) {
    .c-lg-0 { display: none; }
    .c-lg-1 { grid-column: span 1; }
    .c-lg-2 { grid-column: span 2; }
    .c-lg-3 { grid-column: span 3; }
    .c-lg-4 { grid-column: span 4; }
    .c-lg-5 { grid-column: span 5; }
    .c-lg-6 { grid-column: span 6; }
    .c-lg-7 { grid-column: span 7; }
    .c-lg-8 { grid-column: span 8; }
    .c-lg-9 { grid-column: span 9; }
    .c-lg-10 { grid-column: span 10; }
    .c-lg-11 { grid-column: span 11; }
    .c-lg-12 { grid-column: span 12; }
}

/* Estilos responsivos para pantallas medianas (MD) */
@media (max-width: 992px) {
    .c-md-0 { display: none; }
    .c-md-1 { grid-column: span 1; }
    .c-md-2 { grid-column: span 2; }
    .c-md-3 { grid-column: span 3; }
    .c-md-4 { grid-column: span 4; }
    .c-md-5 { grid-column: span 5; }
    .c-md-6 { grid-column: span 6; }
    .c-md-7 { grid-column: span 7; }
    .c-md-8 { grid-column: span 8; }
    .c-md-9 { grid-column: span 9; }
    .c-md-10 { grid-column: span 10; }
    .c-md-11 { grid-column: span 11; }
    .c-md-12 { grid-column: span 12; }
}

/* Estilos responsivos para pantallas pequeñas (SM) */
@media (max-width: 768px) {
    .c-sm-0 { display: none; }
    .c-sm-1 { grid-column: span 1; }
    .c-sm-2 { grid-column: span 2; }
    .c-sm-3 { grid-column: span 3; }
    .c-sm-4 { grid-column: span 4; }
    .c-sm-5 { grid-column: span 5; }
    .c-sm-6 { grid-column: span 6; }
    .c-sm-7 { grid-column: span 7; }
    .c-sm-8 { grid-column: span 8; }
    .c-sm-9 { grid-column: span 9; }
    .c-sm-10 { grid-column: span 10; }
    .c-sm-11 { grid-column: span 11; }
    .c-sm-12 { grid-column: span 12; }
}

/* Estilos responsivos para pantallas muy pequeñas (XS) */
@media (max-width: 576px) {
    .c-xs-0 { display: none; }
    .c-xs-1 { grid-column: span 1; }
    .c-xs-2 { grid-column: span 2; }
    .c-xs-3 { grid-column: span 3; }
    .c-xs-4 { grid-column: span 4; }
    .c-xs-5 { grid-column: span 5; }
    .c-xs-6 { grid-column: span 6; }
    .c-xs-7 { grid-column: span 7; }
    .c-xs-8 { grid-column: span 8; }
    .c-xs-9 { grid-column: span 9; }
    .c-xs-10 { grid-column: span 10; }
    .c-xs-11 { grid-column: span 11; }
    .c-xs-12 { grid-column: span 12; }
}