/* Set up the grid container */
.container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 12 columns */
    gap: 20px;
    /* 20px gap between columns */
    margin: 0 auto;
    max-width: 1200px;
    /* maximum width of container */
    padding: 0 20px;
    /* add padding to container */
}

/* Define column classes */
.col {
    position: relative;
    min-height: 1px;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Media queries for different screen sizes */
@media screen and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    .col-1 {
        grid-column: span 12;
    }

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    .col-1 {
        grid-column: span 12;
    }

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 767px) {
    .container {
        max-width: 540px;
    }

    .col {
        margin-right: 10px;
        margin-left: 10px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 575px) {
    .container {
        max-width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col {
        margin-right: 10px;
        margin-left: 10px;
    }

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

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

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

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

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

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

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

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

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

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

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

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