/* CONFIGURAÇÃO GRID */
.grid-container{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-columns: 1fr;
    gap: 0 1rem;
    padding: 1rem;
    max-width: 60rem;
    margin: 0 auto;
}

*, *:before, *:after {
    box-sizing: border-box;
  }

.grid-container.fluid{
    max-width: 100%;
}

/* Padding */
.pl-0{
    padding-left: 0;
}

.pr-0{
    padding-right: 0;
}

.pt-0{
    padding-top: 0;
}

.pb-0{
    padding-bottom: 0;
}

/* Columns */
.grid-col-1{
    grid-column: span 1;
}

.grid-col-2{
    grid-column: span 2;
}

.grid-col-3{
    grid-column: span 3;
}

.grid-col-4{
    grid-column: span 4;
}

.grid-col-5{
    grid-column: span 5;
}

.grid-col-6{
    grid-column: span 6;
}

.grid-col-7{
    grid-column: span 7;
}

.grid-col-8{
    grid-column: span 8;
}

.grid-col-9{
    grid-column: span 9;
}

.grid-col-10{
    grid-column: span 10;
}

.grid-col-11{
    grid-column: span 11;
}

.grid-col-12{
    grid-column: span 12;
}

.grid-row-1{
    grid-row: span 1;
}

.grid-row-2{
    grid-row: span 2;
}

.grid-row-3{
    grid-row: span 3;
}

.grid-row-4{
    grid-row: span 4;
}

.grid-row-5{
    grid-row: span 5;
}

.grid-row-6{
    grid-row: span 6;
}

.grid-row-7{
    grid-row: span 7;
}

.grid-row-8{
    grid-row: span 8;
}

.grid-row-9{
    grid-row: span 9;
}

.grid-row-10{
    grid-row: span 10;
}

.grid-row-11{
    grid-row: span 11;
}

.grid-row-12{
    grid-row: span 12;
}

/* Align */
.justify-evenly{
    justify-content: space-evenly; 
}

.justify-around{
    justify-content: space-around; 
}

.justify-between{
    justify-content: space-between; 
}

.justify-center{
    justify-content: center; 
}

.justify-start{
    justify-content: start; 
}

.justify-end{
    justify-content: end; 
}

.align-center{
    align-content: center;
}

.align-evenly{
    align-content: space-evenly;
}

.align-around{
    align-content: space-around;
}

.align-between{
    align-content: space-between;
}

.align-start{
    align-content: start;
}

.align-end{
    align-content: end;
}

.text-center {
    text-align: center;
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (max-width: 1400px) {
    
    /* Columns */
    .grid-col-xxl-1{
        grid-column: span 1;
    }

    .grid-col-xxl-2{
        grid-column: span 2;
    }

    .grid-col-xxl-3{
        grid-column: span 3;
    }

    .grid-col-xxl-4{
        grid-column: span 4;
    }

    .grid-col-xxl-5{
        grid-column: span 5;
    }

    .grid-col-xxl-6{
        grid-column: span 6;
    }

    .grid-col-xxl-7{
        grid-column: span 7;
    }

    .grid-col-xxl-8{
        grid-column: span 8;
    }

    .grid-col-xxl-9{
        grid-column: span 9;
    }

    .grid-col-xxl-10{
        grid-column: span 10;
    }

    .grid-col-xxl-11{
        grid-column: span 11;
    }

    .grid-col-xxl-12{
        grid-column: span 12;
    }

}

/* X-Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {

    /* Columns */
    .grid-col-xl-1{
        grid-column: span 1;
    }

    .grid-col-xl-2{
        grid-column: span 2;
    }

    .grid-col-xl-3{
        grid-column: span 3;
    }

    .grid-col-xl-4{
        grid-column: span 4;
    }

    .grid-col-xl-5{
        grid-column: span 5;
    }

    .grid-col-xl-6{
        grid-column: span 6;
    }

    .grid-col-xl-7{
        grid-column: span 7;
    }

    .grid-col-xl-8{
        grid-column: span 8;
    }

    .grid-col-xl-9{
        grid-column: span 9;
    }

    .grid-col-xl-10{
        grid-column: span 10;
    }

    .grid-col-xl-11{
        grid-column: span 11;
    }

    .grid-col-xl-12{
        grid-column: span 12;
    }

}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {

    /* Columns */
    .grid-col-ld-1{
        grid-column: span 1;
    }

    .grid-col-ld-2{
        grid-column: span 2;
    }

    .grid-col-ld-3{
        grid-column: span 3;
    }

    .grid-col-ld-4{
        grid-column: span 4;
    }

    .grid-col-ld-5{
        grid-column: span 5;
    }

    .grid-col-ld-6{
        grid-column: span 6;
    }

    .grid-col-ld-7{
        grid-column: span 7;
    }

    .grid-col-ld-8{
        grid-column: span 8;
    }

    .grid-col-ld-9{
        grid-column: span 9;
    }

    .grid-col-ld-10{
        grid-column: span 10;
    }

    .grid-col-ld-11{
        grid-column: span 11;
    }

    .grid-col-ld-12{
        grid-column: span 12;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {

    /* Columns */
    .grid-col-md-1{
        grid-column: span 1;
    }

    .grid-col-md-2{
        grid-column: span 2;
    }

    .grid-col-md-3{
        grid-column: span 3;
    }

    .grid-col-md-4{
        grid-column: span 4;
    }

    .grid-col-md-5{
        grid-column: span 5;
    }

    .grid-col-md-6{
        grid-column: span 6;
    }

    .grid-col-md-7{
        grid-column: span 7;
    }

    .grid-col-md-8{
        grid-column: span 8;
    }

    .grid-col-md-9{
        grid-column: span 9;
    }

    .grid-col-md-10{
        grid-column: span 10;
    }

    .grid-col-md-11{
        grid-column: span 11;
    }

    .grid-col-md-12{
        grid-column: span 12;
    }

}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

    /* Columns */
    .grid-col-sm-1{
        grid-column: span 1;
    }

    .grid-col-sm-2{
        grid-column: span 2;
    }

    .grid-col-sm-3{
        grid-column: span 3;
    }

    .grid-col-sm-4{
        grid-column: span 4;
    }

    .grid-col-sm-5{
        grid-column: span 5;
    }

    .grid-col-sm-6{
        grid-column: span 6;
    }

    .grid-col-sm-7{
        grid-column: span 7;
    }

    .grid-col-sm-8{
        grid-column: span 8;
    }

    .grid-col-sm-9{
        grid-column: span 9;
    }

    .grid-col-sm-10{
        grid-column: span 10;
    }

    .grid-col-sm-11{
        grid-column: span 11;
    }

    .grid-col-sm-12{
        grid-column: span 12;
    }

}

.img-responsive{
    max-width: 100%;
    height: auto;
}