* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}
/* xxl and up */
.container {
    --spacer: 24px;
    --columns: 12;

    max-width: 1320px;
    padding-left: calc(var(--spacer) / 2);
    padding-right: calc(var(--spacer) / 2);
    margin-left: auto;
    margin-right: auto;
}

.row {
    --spacer-x: var(--spacer);
    --spacer-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--spacer-x) / 2 * -1);
    margin-right: calc(var(--spacer-x) / 2 * -1);
    margin-top: calc(var(--spacer-y) * -1);
}

.col {
    flex: 1 0 auto;
}

.col,
.row > [class*="col-"] {
    padding-left: calc(var(--spacer-x) / 2);
    padding-right: calc(var(--spacer-x) / 2);
    margin-top: var(--spacer-y);
}

.row > [class*="col-"] {
    width: calc(100% / var(--columns) * var(--column-number));
}

.row > [class*="offset-"] {
    margin-left: calc(100% / var(--columns) * var(--col-offset));
}

.row[class*="row-cols-"] > * {
    width: calc(100% / var(--row-cols-number));
}

/* offset */
.offset-0 {
    --col-offset: 0;
}

.offset-1 {
    --col-offset: 1;
}

.offset-2 {
    --col-offset: 2;
}

.offset-3 {
    --col-offset: 3;
}

.offset-4 {
    --col-offset: 4;
}

.offset-5 {
    --col-offset: 5;
}

.offset-6 {
    --col-offset: 6;
}

.offset-7 {
    --col-offset: 7;
}

.offset-8 {
    --col-offset: 8;
}

.offset-9 {
    --col-offset: 9;
}

.offset-10 {
    --col-offset: 10;
}

.offset-11 {
    --col-offset: 11;
}

/* spacer-x */
.g-0,
.gx-0 {
    --spacer-x: calc(var(--spacer) * 0);
}

.g-1,
.gx-1 {
    --spacer-x: calc(var(--spacer) * 0.25);
}

.g-2,
.gx-2 {
    --spacer-x: calc(var(--spacer) * 0.5);
}

.g-3,
.gx-3 {
    --spacer-x: var(--spacer);
}

.g-4,
.gx-4 {
    --spacer-x: calc(var(--spacer) * 1.5);
}

.g-5,
.gx-5 {
    --spacer-x: calc(var(--spacer) * 3);
}

/* spacer-y */
.g-0,
.gy-0 {
    --spacer-y: calc(var(--spacer) * 0);
}

.g-1,
.gy-1 {
    --spacer-y: calc(var(--spacer) * 0.25);
}

.g-2,
.gy-2 {
    --spacer-y: calc(var(--spacer) * 0.5);
}

.g-3,
.gy-3 {
    --spacer-y: var(--spacer);
}

.g-4,
.gy-4 {
    --spacer-y: calc(var(--spacer) * 1.5);
}

.g-5,
.gy-5 {
    --spacer-y: calc(var(--spacer) * 3);
}

/* row-cols */
.row-cols-1 {
    --row-cols-number: 1;
}

.row-cols-2 {
    --row-cols-number: 2;
}

.row-cols-3 {
    --row-cols-number: 3;
}

.row-cols-4 {
    --row-cols-number: 4;
}

.row-cols-5 {
    --row-cols-number: 5;
}

.row-cols-6 {
    --row-cols-number: 6;
}

/* col */
.col-1 {
    --column-number: 1;
}

.col-2 {
    --column-number: 2;
}

.col-3 {
    --column-number: 3;
}

.col-4 {
    --column-number: 4;
}

.col-5 {
    --column-number: 5;
}

.col-6 {
    --column-number: 6;
}

.col-7 {
    --column-number: 7;
}

.col-8 {
    --column-number: 8;
}

.col-9 {
    --column-number: 9;
}

.col-10 {
    --column-number: 10;
}

.col-11 {
    --column-number: 11;
}

.col-12 {
    --column-number: 12;
}

/* xl */
@media (max-width: 1399.98px) {
    .container {
        max-width: 1140px;
    }
    /* row-cols */
    .row-cols-xl-1 {
        --row-cols-number: 1;
    }

    .row-cols-xl-2 {
        --row-cols-number: 2;
    }

    .row-cols-xl-3 {
        --row-cols-number: 3;
    }

    .row-cols-xl-4 {
        --row-cols-number: 4;
    }

    .row-cols-xl-5 {
        --row-cols-number: 5;
    }

    .row-cols-xl-6 {
        --row-cols-number: 6;
    }

    /* col */
    .col-xl-1 {
        --column-number: 1;
    }

    .col-xl-2 {
        --column-number: 2;
    }

    .col-xl-3 {
        --column-number: 3;
    }

    .col-xl-4 {
        --column-number: 4;
    }

    .col-xl-5 {
        --column-number: 5;
    }

    .col-xl-6 {
        --column-number: 6;
    }

    .col-xl-7 {
        --column-number: 7;
    }

    .col-xl-8 {
        --column-number: 8;
    }

    .col-xl-9 {
        --column-number: 9;
    }

    .col-xl-10 {
        --column-number: 10;
    }

    .col-xl-11 {
        --column-number: 11;
    }

    .col-xl-12 {
        --column-number: 12;
    }

    /* spacer-x */
    .g-xl-0,
    .gx-xl-0 {
        --spacer-x: calc(var(--spacer) * 0);
    }

    .g-xl-1,
    .gx-xl-1 {
        --spacer-x: calc(var(--spacer) * 0.25);
    }

    .g-xl-2,
    .gx-xl-2 {
        --spacer-x: calc(var(--spacer) * 0.5);
    }

    .g-xl-3,
    .gx-xl-3 {
        --spacer-x: var(--spacer);
    }

    .g-xl-4,
    .gx-xl-4 {
        --spacer-x: calc(var(--spacer) * 1.5);
    }

    .g-xl-5,
    .gx-xl-5 {
        --spacer-x: calc(var(--spacer) * 3);
    }

    /* spacer-y */
    .g-xl-0,
    .gy-xl-0 {
        --spacer-y: calc(var(--spacer) * 0);
    }

    .g-xl-1,
    .gy-xl-1 {
        --spacer-y: calc(var(--spacer) * 0.25);
    }

    .g-xl-2,
    .gy-xl-2 {
        --spacer-y: calc(var(--spacer) * 0.5);
    }

    .g-xl-3,
    .gy-xl-3 {
        --spacer-y: var(--spacer);
    }

    .g-xl-4,
    .gy-xl-4 {
        --spacer-y: calc(var(--spacer) * 1.5);
    }

    .g-xl-5,
    .gy-xl-5 {
        --spacer-y: calc(var(--spacer) * 3);
    }

    /* offset */

    .offset--xl-0 {
        --col-offset: 0;
    }

    .offset--xl-1 {
        --col-offset: 1;
    }

    .offset--xl-2 {
        --col-offset: 2;
    }

    .offset--xl-3 {
        --col-offset: 3;
    }

    .offset--xl-4 {
        --col-offset: 4;
    }

    .offset--xl-5 {
        --col-offset: 5;
    }

    .offset--xl-6 {
        --col-offset: 6;
    }

    .offset--xl-7 {
        --col-offset: 7;
    }

    .offset--xl-8 {
        --col-offset: 8;
    }

    .offset--xl-9 {
        --col-offset: 9;
    }

    .offset--xl-10 {
        --col-offset: 10;
    }

    .offset--xl-11 {
        --col-offset: 11;
    }
}

/* lg */
@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
    /* row-cols */
    .row-cols-lg-1 {
        --row-cols-number: 1;
    }

    .row-cols-lg-2 {
        --row-cols-number: 2;
    }

    .row-cols-lg-3 {
        --row-cols-number: 3;
    }

    .row-cols-lg-4 {
        --row-cols-number: 4;
    }

    .row-cols-lg-5 {
        --row-cols-number: 5;
    }

    .row-cols-lg-6 {
        --row-cols-number: 6;
    }

    /* col */
    .col-lg-1 {
        --column-number: 1;
    }

    .col-lg-2 {
        --column-number: 2;
    }

    .col-lg-3 {
        --column-number: 3;
    }

    .col-lg-4 {
        --column-number: 4;
    }

    .col-lg-5 {
        --column-number: 5;
    }

    .col-lg-6 {
        --column-number: 6;
    }

    .col-lg-7 {
        --column-number: 7;
    }

    .col-lg-8 {
        --column-number: 8;
    }

    .col-lg-9 {
        --column-number: 9;
    }

    .col-lg-10 {
        --column-number: 10;
    }

    .col-lg-11 {
        --column-number: 11;
    }

    .col-lg-12 {
        --column-number: 12;
    }

    /* spacer-x */
    .g-lg-0,
    .gx-lg-0 {
        --spacer-x: calc(var(--spacer) * 0);
    }

    .g-lg-1,
    .gx-lg-1 {
        --spacer-x: calc(var(--spacer) * 0.25);
    }

    .g-lg-2,
    .gx-lg-2 {
        --spacer-x: calc(var(--spacer) * 0.5);
    }

    .g-lg-3,
    .gx-lg-3 {
        --spacer-x: var(--spacer);
    }

    .g-lg-4,
    .gx-lg-4 {
        --spacer-x: calc(var(--spacer) * 1.5);
    }

    .g-lg-5,
    .gx-lg-5 {
        --spacer-x: calc(var(--spacer) * 3);
    }

    /* spacer-y */
    .g-lg-0,
    .gy-lg-0 {
        --spacer-y: calc(var(--spacer) * 0);
    }

    .g-lg-1,
    .gy-lg-1 {
        --spacer-y: calc(var(--spacer) * 0.25);
    }

    .g-lg-2,
    .gy-lg-2 {
        --spacer-y: calc(var(--spacer) * 0.5);
    }

    .g-lg-3,
    .gy-lg-3 {
        --spacer-y: var(--spacer);
    }

    .g-lg-4,
    .gy-lg-4 {
        --spacer-y: calc(var(--spacer) * 1.5);
    }

    .g-lg-5,
    .gy-lg-5 {
        --spacer-y: calc(var(--spacer) * 3);
    }

    /* offset */

    .offset-lg-0 {
        --col-offset: 0;
    }

    .offset-lg-1 {
        --col-offset: 1;
    }

    .offset-lg-2 {
        --col-offset: 2;
    }

    .offset-lg-3 {
        --col-offset: 3;
    }

    .offset-lg-4 {
        --col-offset: 4;
    }

    .offset-lg-5 {
        --col-offset: 5;
    }

    .offset-lg-6 {
        --col-offset: 6;
    }

    .offset-lg-7 {
        --col-offset: 7;
    }

    .offset-lg-8 {
        --col-offset: 8;
    }

    .offset-lg-9 {
        --col-offset: 9;
    }

    .offset-lg-10 {
        --col-offset: 10;
    }

    .offset-lg-11 {
        --col-offset: 11;
    }
}

/* md */
@media (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    /* row-cols */
    .row-cols-md-1 {
        --row-cols-number: 1;
    }

    .row-cols-md-2 {
        --row-cols-number: 2;
    }

    .row-cols-md-3 {
        --row-cols-number: 3;
    }

    .row-cols-md-4 {
        --row-cols-number: 4;
    }

    .row-cols-md-5 {
        --row-cols-number: 5;
    }

    .row-cols-md-6 {
        --row-cols-number: 6;
    }

    /* col */
    .col-md-1 {
        --column-number: 1;
    }

    .col-md-2 {
        --column-number: 2;
    }

    .col-md-3 {
        --column-number: 3;
    }

    .col-md-4 {
        --column-number: 4;
    }

    .col-md-5 {
        --column-number: 5;
    }

    .col-md-6 {
        --column-number: 6;
    }

    .col-md-7 {
        --column-number: 7;
    }

    .col-md-8 {
        --column-number: 8;
    }

    .col-md-9 {
        --column-number: 9;
    }

    .col-md-10 {
        --column-number: 10;
    }

    .col-md-11 {
        --column-number: 11;
    }

    .col-md-12 {
        --column-number: 12;
    }

    /* spacer-x */
    .g-md-0,
    .gx-md-0 {
        --spacer-x: calc(var(--spacer) * 0);
    }

    .g-md-1,
    .gx-md-1 {
        --spacer-x: calc(var(--spacer) * 0.25);
    }

    .g-md-2,
    .gx-md-2 {
        --spacer-x: calc(var(--spacer) * 0.5);
    }

    .g-md-3,
    .gx-md-3 {
        --spacer-x: var(--spacer);
    }

    .g-md-4,
    .gx-md-4 {
        --spacer-x: calc(var(--spacer) * 1.5);
    }

    .g-md-5,
    .gx-md-5 {
        --spacer-x: calc(var(--spacer) * 3);
    }

    /* spacer-y */
    .g-md-0,
    .gy-md-0 {
        --spacer-y: calc(var(--spacer) * 0);
    }

    .g-md-1,
    .gy-md-1 {
        --spacer-y: calc(var(--spacer) * 0.25);
    }

    .g-md-2,
    .gy-md-2 {
        --spacer-y: calc(var(--spacer) * 0.5);
    }

    .g-md-3,
    .gy-md-3 {
        --spacer-y: var(--spacer);
    }

    .g-md-4,
    .gy-md-4 {
        --spacer-y: calc(var(--spacer) * 1.5);
    }

    .g-md-5,
    .gy-md-5 {
        --spacer-y: calc(var(--spacer) * 3);
    }
    /* offset */

    .offset-md-0 {
        --col-offset: 0;
    }

    .offset-md-1 {
        --col-offset: 1;
    }

    .offset-md-2 {
        --col-offset: 2;
    }

    .offset-md-3 {
        --col-offset: 3;
    }

    .offset-md-4 {
        --col-offset: 4;
    }

    .offset-md-5 {
        --col-offset: 5;
    }

    .offset-md-6 {
        --col-offset: 6;
    }

    .offset-md-7 {
        --col-offset: 7;
    }

    .offset-md-8 {
        --col-offset: 8;
    }

    .offset-md-9 {
        --col-offset: 9;
    }

    .offset-md-10 {
        --col-offset: 10;
    }

    .offset-md-11 {
        --col-offset: 11;
    }
}

/* sm */
@media (max-width: 767.98px) {
    .container {
        max-width: 540px;
    }
    /* row-cols */
    .row-cols-sm-1 {
        --row-cols-number: 1;
    }

    .row-cols-sm-2 {
        --row-cols-number: 2;
    }

    .row-cols-sm-3 {
        --row-cols-number: 3;
    }

    .row-cols-sm-4 {
        --row-cols-number: 4;
    }

    .row-cols-sm-5 {
        --row-cols-number: 5;
    }

    .row-cols-sm-6 {
        --row-cols-number: 6;
    }

    /* col */
    .col-sm-1 {
        --column-number: 1;
    }

    .col-sm-2 {
        --column-number: 2;
    }

    .col-sm-3 {
        --column-number: 3;
    }

    .col-sm-4 {
        --column-number: 4;
    }

    .col-sm-5 {
        --column-number: 5;
    }

    .col-sm-6 {
        --column-number: 6;
    }

    .col-sm-7 {
        --column-number: 7;
    }

    .col-sm-8 {
        --column-number: 8;
    }

    .col-sm-9 {
        --column-number: 9;
    }

    .col-sm-10 {
        --column-number: 10;
    }

    .col-sm-11 {
        --column-number: 11;
    }

    .col-sm-12 {
        --column-number: 12;
    }

    /* spacer-x */
    .g-sm-0,
    .gx-sm-0 {
        --spacer-x: calc(var(--spacer) * 0);
    }

    .g-sm-1,
    .gx-sm-1 {
        --spacer-x: calc(var(--spacer) * 0.25);
    }

    .g-sm-2,
    .gx-sm-2 {
        --spacer-x: calc(var(--spacer) * 0.5);
    }

    .g-sm-3,
    .gx-sm-3 {
        --spacer-x: var(--spacer);
    }

    .g-sm-4,
    .gx-sm-4 {
        --spacer-x: calc(var(--spacer) * 1.5);
    }

    .g-sm-5,
    .gx-sm-5 {
        --spacer-x: calc(var(--spacer) * 3);
    }

    /* spacer-y */
    .g-sm-0,
    .gy-sm-0 {
        --spacer-y: calc(var(--spacer) * 0);
    }

    .g-sm-1,
    .gy-sm-1 {
        --spacer-y: calc(var(--spacer) * 0.25);
    }

    .g-sm-2,
    .gy-sm-2 {
        --spacer-y: calc(var(--spacer) * 0.5);
    }

    .g-sm-3,
    .gy-sm-3 {
        --spacer-y: var(--spacer);
    }

    .g-sm-4,
    .gy-sm-4 {
        --spacer-y: calc(var(--spacer) * 1.5);
    }

    .g-sm-5,
    .gy-sm-5 {
        --spacer-y: calc(var(--spacer) * 3);
    }
    /* offset */

    .offset-sm-0 {
        --col-offset: 0;
    }

    .offset-sm-1 {
        --col-offset: 1;
    }

    .offset-sm-2 {
        --col-offset: 2;
    }

    .offset-sm-3 {
        --col-offset: 3;
    }

    .offset-sm-4 {
        --col-offset: 4;
    }

    .offset-sm-5 {
        --col-offset: 5;
    }

    .offset-sm-6 {
        --col-offset: 6;
    }

    .offset-sm-7 {
        --col-offset: 7;
    }

    .offset-sm-8 {
        --col-offset: 8;
    }

    .offset-sm-9 {
        --col-offset: 9;
    }

    .offset-sm-10 {
        --col-offset: 10;
    }

    .offset-sm-11 {
        --col-offset: 11;
    }
}

/* xs */
@media (max-width: 575.98px) {
    .container {
        max-width: 100%;
    }
    /* row-cols */
    .row-cols-xs-1 {
        --row-cols-number: 1;
    }

    .row-cols-xs-2 {
        --row-cols-number: 2;
    }

    .row-cols-xs-3 {
        --row-cols-number: 3;
    }

    .row-cols-xs-4 {
        --row-cols-number: 4;
    }

    .row-cols-xs-5 {
        --row-cols-number: 5;
    }

    .row-cols-xs-6 {
        --row-cols-number: 6;
    }

    /* col */
    .col-xs-1 {
        --column-number: 1;
    }

    .col-xs-2 {
        --column-number: 2;
    }

    .col-xs-3 {
        --column-number: 3;
    }

    .col-xs-4 {
        --column-number: 4;
    }

    .col-xs-5 {
        --column-number: 5;
    }

    .col-xs-6 {
        --column-number: 6;
    }

    .col-xs-7 {
        --column-number: 7;
    }

    .col-xs-8 {
        --column-number: 8;
    }

    .col-xs-9 {
        --column-number: 9;
    }

    .col-xs-10 {
        --column-number: 10;
    }

    .col-xs-11 {
        --column-number: 11;
    }

    .col-xs-12 {
        --column-number: 12;
    }

    /* spacer-x */
    .g-xs-0,
    .gx-xs-0 {
        --spacer-x: calc(var(--spacer) * 0);
    }

    .g-xs-1,
    .gx-xs-1 {
        --spacer-x: calc(var(--spacer) * 0.25);
    }

    .g-xs-2,
    .gx-xs-2 {
        --spacer-x: calc(var(--spacer) * 0.5);
    }

    .g-xs-3,
    .gx-xs-3 {
        --spacer-x: var(--spacer);
    }

    .g-xs-4,
    .gx-xs-4 {
        --spacer-x: calc(var(--spacer) * 1.5);
    }

    .g-xs-5,
    .gx-xs-5 {
        --spacer-x: calc(var(--spacer) * 3);
    }

    /* spacer-y */
    .g-xs-0,
    .gy-xs-0 {
        --spacer-y: calc(var(--spacer) * 0);
    }

    .g-xs-1,
    .gy-xs-1 {
        --spacer-y: calc(var(--spacer) * 0.25);
    }

    .g-xs-2,
    .gy-xs-2 {
        --spacer-y: calc(var(--spacer) * 0.5);
    }

    .g-xs-3,
    .gy-xs-3 {
        --spacer-y: var(--spacer);
    }

    .g-xs-4,
    .gy-xs-4 {
        --spacer-y: calc(var(--spacer) * 1.5);
    }

    .g-xs-5,
    .gy-xs-5 {
        --spacer-y: calc(var(--spacer) * 3);
    }
    /* offset */

    .offset-xs-0 {
        --col-offset: 0;
    }

    .offset-xs-1 {
        --col-offset: 1;
    }

    .offset-xs-2 {
        --col-offset: 2;
    }

    .offset-xs-3 {
        --col-offset: 3;
    }

    .offset-xs-4 {
        --col-offset: 4;
    }

    .offset-xs-5 {
        --col-offset: 5;
    }

    .offset-xs-6 {
        --col-offset: 6;
    }

    .offset-xs-7 {
        --col-offset: 7;
    }

    .offset-xs-8 {
        --col-offset: 8;
    }

    .offset-xs-9 {
        --col-offset: 9;
    }

    .offset-xs-10 {
        --col-offset: 10;
    }

    .offset-xs-11 {
        --col-offset: 11;
    }
}