.container,
.footer-grid,
.form-grid,
.grid-3-col {
    display: grid;
    grid-template-rows: auto;
}

.center {
    margin: 0 auto;
}

.container {
    width: 100%;
    grid-template-columns: 10% 20% 20% 20% 20% 10%;
}

.grid-3-col {
    width: 100%;
    grid-template-columns: 10% 26.666% 26.666% 26.666% 10%;
}

.grid-col-1 {
    grid-column-start: 2;
    grid-column-end: 3;
}

.grid-col-2 {
    grid-column-start: 3;
    grid-column-end: 4;
}

.grid-col-3 {
    grid-column-start: 4;
    grid-column-end: 5;
}

.row {
    display: flex;
    flex-direction: row;
}

.row-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.center-align {
    justify-content: center;
    grid-column-start: 1;
    grid-column-end: 9;
}

.col-1 {
    grid-column-start: 2;
    grid-column-end: 3;
}

.col-2,
.col-2-2 {
    grid-column-start: 3;
    grid-column-end: 4;
}

.col-3,
.col-3-2 {
    grid-column-start: 4;
    grid-column-end: 5;
}

.col-4,
.col-4-2 {
    grid-column-start: 5;
    grid-column-end: 6;
}

.span-2-col {
    grid-column-start: 2;
    grid-column-end: 4;
}

.span-middle {
    grid-column-start: 3;
    grid-column-end: 5;
}

.span-3-col {
    grid-column-start: 2;
    grid-column-end: 5;
}

.span-4-col {
    grid-column-start: 2;
    grid-column-end: 6;
}

.span-2-col-start {
    grid-column-start: 2;
    grid-column-end: 4;
}

.span-2-col-end {
    grid-column-start: 4;
    grid-column-end: 6;
}

.span-3-col-end {
    grid-column-start: 3;
    grid-column-end: 6;
}

.footer-grid {
    display: grid;
    grid-template-columns: 10% 16% 16% 16% 16% 16% 10%;
}

.footer-col-1 {
    grid-column-start: 2;
    grid-column-end: 3;
}

.footer-col-2 {
    grid-column-start: 3;
    grid-column-end: 4;
}

.footer-col-3 {
    grid-column-start: 4;
    grid-column-end: 5;
}

.footer-col-4 {
    grid-column-start: 5;
    grid-column-end: 6;
}

.footer-col-5 {
    grid-column-start: 6;
    grid-column-end: 7;
}

.form-grid {
    grid-template-columns: 9% 1% 40% 1fr 3% 1fr 42% 1fr 5%;
}

.form-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    margin-top: 11%;
}

.form-2 {
    grid-column-start: 3;
    grid-column-end: 4;
}

.form-3 {
    grid-column-start: 5;
    grid-column-end: 6;
}

.form-4 {
    grid-column-start: 7;
    grid-column-end: 8;
}

.form-5 {
    grid-column-start: 9;
    grid-column-end: 10;
}

.form-span-5 {
    grid-column-start: 1;
    grid-column-end: 10;
}

.form-span-3-start {
    grid-column-start: 1;
    grid-column-end: 4;
}

.form-span-3-end {
    grid-column-start: 6;
    grid-column-end: 10;
}

@media (max-width: 1024px) {
    .container {
        grid-template-columns: 3% 23.5% 23.5% 23.5% 23.5% 3%;
    }

    .footer-grid {
        grid-template-columns: 3% 20% 18% 18% 18% 20% 3%;
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 5% 45% 45% 5%;
    }

    .col-1-tablet {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .col-2-tablet {
        grid-column-start: 3;
        grid-column-end: 4;
    }

    .span-2-col-tablet {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .col-offspan-tablet {
        grid-column-start: 2;
        grid-column-end: 4;
    }

    .col-2-offspan-tablet {
        grid-column-start: 3;
        grid-row-end: 4;
    }

    .grid-3-col {
        grid-template-columns: 3% 31.333% 31.333% 31.333% 3%;
    }

    .footer-grid {
        grid-template-columns: 5% 45% 45% 5%;
    }

    .footer-col-1-tablet {
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .footer-col-2-tablet {
        grid-column-start: 3;
        grid-column-end: 4;
    }
}

@media (max-width: 535px) {
    .container,
    .footer-grid,
    .grid-3-col {
        grid-template-columns: 5% 90% 5%;
    }

    .col-offspan-tablet {
        grid-column-start: 2;
        grid-column-end: 2;
    }

    .col-offspan-tablet>.row {
        display: block;
    }

    .col-1,
    .col-2,
    .col-2-2
    .col-3,
    .col-3-2,
    .col-4,
    .col-4-2,
    .grid-col-1,
    .grid-col-2,
    .grid-col-3,
    .col-1-tablet,
    .col-2-tablet,
    .footer-col-1-tablet,
    .footer-col-2-tablet,
    .span-2-col,
    .span-2-col-end,
    .span-2-col-start,
    .span-3-col,
    .span-3-col-end,
    .span-4-col {
        grid-column-start: 2;
        grid-column-end: 3;
    }
}