/* Columns */

.container {
    height: initial;
    max-width: 1366px;
    padding-left: 6rem;
    padding-right: 6rem;
    margin-left: auto;
    margin-right: auto;

    @media (max-width: 768px) {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    @media (max-width: 480px) {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.columns {
    height: inherit;
    display: grid;
    grid-template-columns: repeat(12, 1fr);

}

.columns-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: dense;
}

col {
    flex-grow: 1;
}

.col-1 {
    grid-column: auto / span 1;

    &:nth-child(2) {}
}

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

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

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

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

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

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

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

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

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

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

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

@include respond(tablet) {

    .col-t-1 {
        grid-column: auto / span 1;
    }

    .col-t-2 {
        grid-column: auto / span 2;
    }

    .col-t-3 {
        grid-column: auto/ span 3;
    }

    .col-t-4 {
        grid-column: auto / span 4;
    }

    .col-t-5 {
        grid-column: auto / span 5;
    }

    .col-t-6 {
        grid-column: auto / span 6;
    }

    .col-t-7 {
        grid-column: auto / span 7;
    }

    .col-t-8 {
        grid-column: auto / span 8;
    }

    .col-t-9 {
        grid-column: auto / span 9;
    }

    .col-t-10 {
        grid-column: auto / span 10;
    }

    .col-t-11 {
        grid-column: auto / span 11;
    }

    .col-t-12 {
        grid-column: auto / span 12;
    }

}

@include respond(phone) {

    .col-m-1 {
        grid-column: auto / span 1;
    }

    .col-m-2 {
        grid-column: auto / span 2;
    }

    .col-m-3 {
        grid-column: auto/ span 3;
    }

    .col-m-4 {
        grid-column: auto / span 4;
    }

    .col-m-5 {
        grid-column: auto / span 5;
    }

    .col-m-6 {
        grid-column: auto / span 6;
    }

    .col-m-7 {
        grid-column: auto / span 7;
    }

    .col-m-8 {
        grid-column: auto / span 8;
    }

    .col-m-9 {
        grid-column: auto / span 9;
    }

    .col-m-10 {
        grid-column: auto / span 10;
    }

    .col-m-11 {
        grid-column: auto / span 11;
    }

    .col-m-12 {
        grid-column: auto / span 12;
    }
}

.col-auto {
    grid-column: auto;
    grid-row: auto;
}

.row-auto {
    grid-row: auto;
}


/** Gap **/

.gap-5 {
    grid-gap: 5px;
}

.gap-10 {
    grid-gap: 10px;
}

.gap-20 {
    grid-gap: 20px;
}

.gap-30 {
    grid-gap: 30px;
}

.gap-40 {
    grid-gap: 40px;
}

.gap-50 {
    grid-gap: 50px;
}


/** Column Gap **/

.col-gap-5 {
    grid-column-gap: 10px;
}

.col-gap-10 {
    grid-column-gap: 10px;
}

.col-gap-20 {
    grid-column-gap: 20px;
}

.col-gap-30 {
    grid-column-gap: 30px;
}

.col-gap-40 {
    grid-column-gap: 40px;
}

.col-gap-50 {
    grid-column-gap: 50px;
}

.col-gap-150 {
    grid-column-gap: 150px;
}


/** Row Gap **/

.row-gap-5 {
    grid-row-gap: 5px;
}

.row-gap-10 {
    grid-row-gap: 10px;
}

.row-gap-20 {
    grid-row-gap: 20px;
}

.row-gap-30 {
    grid-row-gap: 30px;
}

.row-gap-40 {
    grid-row-gap: 40px;
}

.row-gap-50 {
    grid-row-gap: 50px;
}

@include respond(phone) {
    /** Gap **/

    .gap-m-5 {
        grid-gap: 5px;
    }

    .gap-m-10 {
        grid-gap: 10px;
    }

    .gap-m-20 {
        grid-gap: 20px;
    }

    .gap-m-30 {
        grid-gap: 30px;
    }

    .gap-m-40 {
        grid-gap: 40px;
    }

    .gap-m-50 {
        grid-gap: 50px;
    }
}


.center {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-start;
}

.left {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
}


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

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

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


@include respond(phone) {
    .text-m-center {
        text-align: center;
    }

    .text-m-left {
        text-align: left;
    }

    .text-m-right {
        text-align: right;
    }

    .center-m {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .right-m {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        align-content: flex-start;
    }

    .left-m {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        align-content: flex-start;
    }
}