.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .flex-grid.tight {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .flex-grid.default {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .flex-grid.spacious {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .flex-grid.generous {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }

.columns-1 {
    flex: 0 0 calc((100% - (1 - 1) * 1rem) / 1);
    width: calc((100% - (1 - 1) * 1rem) / 1);
}

.columns-2 {
    flex: 0 0 calc((100% - (2 - 1) * 1rem) / 2);
    width: calc((100% - (2 - 1) * 1rem) / 2);
}

.columns-3 {
    flex: 0 0 calc((100% - (3 - 1) * 1rem) / 3);
    width: calc((100% - (3 - 1) * 1rem) / 3);
}

.columns-4 {
    flex: 0 0 calc((100% - (4 - 1) * 1rem) / 4);
    width: calc((100% - (4 - 1) * 1rem) / 4);
}

@media (min-width: 640px) {
    .columns-sm-1 {
        flex: 0 0 calc((100% - (1 - 1) * 1rem) / 1);
        width: calc((100% - (1 - 1) * 1rem) / 1);
    }

    .columns-sm-2 {
        flex: 0 0 calc((100% - (2 - 1) * 1rem) / 2);
        width: calc((100% - (2 - 1) * 1rem) / 2);
    }

    .columns-sm-3 {
        flex: 0 0 calc((100% - (3 - 1) * 1rem) / 3);
        width: calc((100% - (3 - 1) * 1rem) / 3);
    }

    .columns-sm-4 {
        flex: 0 0 calc((100% - (4 - 1) * 1rem) / 4);
        width: calc((100% - (4 - 1) * 1rem) / 4);
    }
}

@media (min-width: 768px) {
    .columns-md-1 {
        flex: 0 0 calc((100% - (1 - 1) * 1rem) / 1);
        width: calc((100% - (1 - 1) * 1rem) / 1);
    }

    .columns-md-2 {
        flex: 0 0 calc((100% - (2 - 1) * 1rem) / 2);
        width: calc((100% - (2 - 1) * 1rem) / 2);
    }

    .columns-md-3 {
        flex: 0 0 calc((100% - (3 - 1) * 1rem) / 3);
        width: calc((100% - (3 - 1) * 1rem) / 3);
    }

    .columns-md-4 {
        flex: 0 0 calc((100% - (4 - 1) * 1rem) / 4);
        width: calc((100% - (4 - 1) * 1rem) / 4);
    }
}

@media (min-width: 1024px) {
    .columns-lg-1 {
        flex: 0 0 calc((100% - (1 - 1) * 1rem) / 1);
        width: calc((100% - (1 - 1) * 1rem) / 1);
    }

    .columns-lg-2 {
        flex: 0 0 calc((100% - (2 - 1) * 1rem) / 2);
        width: calc((100% - (2 - 1) * 1rem) / 2);
    }

    .columns-lg-3 {
        flex: 0 0 calc((100% - (3 - 1) * 1rem) / 3);
        width: calc((100% - (3 - 1) * 1rem) / 3);
    }

    .columns-lg-4 {
        flex: 0 0 calc((100% - (4 - 1) * 1rem) / 4);
        width: calc((100% - (4 - 1) * 1rem) / 4);
    }
}

@media (min-width: 1280px) {
    .columns-xl-1 {
        flex: 0 0 calc((100% - (1 - 1) * 1rem) / 1);
        width: calc((100% - (1 - 1) * 1rem) / 1);
    }

    .columns-xl-2 {
        flex: 0 0 calc((100% - (2 - 1) * 1rem) / 2);
        width: calc((100% - (2 - 1) * 1rem) / 2);
    }

    .columns-xl-3 {
        flex: 0 0 calc((100% - (3 - 1) * 1rem) / 3);
        width: calc((100% - (3 - 1) * 1rem) / 3);
    }

    .columns-xl-4 {
        flex: 0 0 calc((100% - (4 - 1) * 1rem) / 4);
        width: calc((100% - (4 - 1) * 1rem) / 4);
    }
}

@media (min-width: 1536px) {
    .columns-xxl-1 {
        flex: 0 0 calc((100% - (1 - 1) * 1rem) / 1);
        width: calc((100% - (1 - 1) * 1rem) / 1);
    }

    .columns-xxl-2 {
        flex: 0 0 calc((100% - (2 - 1) * 1rem) / 2);
        width: calc((100% - (2 - 1) * 1rem) / 2);
    }

    .columns-xxl-3 {
        flex: 0 0 calc((100% - (3 - 1) * 1rem) / 3);
        width: calc((100% - (3 - 1) * 1rem) / 3);
    }

    .columns-xxl-4 {
        flex: 0 0 calc((100% - (4 - 1) * 1rem) / 4);
        width: calc((100% - (4 - 1) * 1rem) / 4);
    }
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

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

@media (min-width: 640px) {
    .order-sm-1 {
        order: 1;
    }

    .order-sm-2 {
        order: 2;
    }

    .order-sm-3 {
        order: 3;
    }

    .order-sm-4 {
        order: 4;
    }

    .order-sm-reverse {
        flex-direction: row-reverse;
    }
}

@media (min-width: 768px) {
    .order-md-1 {
        order: 1;
    }

    .order-md-2 {
        order: 2;
    }

    .order-md-3 {
        order: 3;
    }

    .order-md-4 {
        order: 4;
    }

    .order-md-reverse {
        flex-direction: row-reverse;
    }
}

@media (min-width: 1024px) {
    .order-lg-1 {
        order: 1;
    }

    .order-lg-2 {
        order: 2;
    }

    .order-lg-3 {
        order: 3;
    }

    .order-lg-4 {
        order: 4;
    }

    .order-lg-reverse {
        flex-direction: row-reverse;
    }
}

@media (min-width: 1280px) {
    .order-xl-1 {
        order: 1;
    }

    .order-xl-2 {
        order: 2;
    }

    .order-xl-3 {
        order: 3;
    }

    .order-xl-4 {
        order: 4;
    }

    .order-xl-reverse {
        flex-direction: row-reverse;
    }
}

@media (min-width: 1536px) {
    .order-xxl-1 {
        order: 1;
    }

    .order-xxl-2 {
        order: 2;
    }

    .order-xxl-3 {
        order: 3;
    }

    .order-xxl-4 {
        order: 4;
    }

    .order-xxl-reverse {
        flex-direction: row-reverse;
    }
}

@media (max-width: 767px) {
    .sm-first {
        order: -4;
    }

    .sm-second {
        order: -3;
    }

    .sm-third {
        order: -2;
    }

    .sm-fourth {
        order: -1;
    }

    .sm-last {
        order: 99;
    }
}

.max-w-10 {
    max-width: 10%;
}

.max-w-20 {
    max-width: 20%;
}

.max-w-25 {
    max-width: 25%;
}

.max-w-33 {
    max-width: 33.333%;
}

.max-w-40 {
    max-width: 40%;
}

.max-w-50 {
    max-width: 50%;
}

.max-w-60 {
    max-width: 60%;
}

.max-w-66 {
    max-width: 66.666%;
}

.max-w-75 {
    max-width: 75%;
}

.max-w-80 {
    max-width: 80%;
}

.max-w-90 {
    max-width: 90%;
}

.max-w-100 {
    max-width: 100%;
}

@media (max-width: 639px) {
    .max-w-sm-10 {
        max-width: 10%;
    }

    .max-w-sm-20 {
        max-width: 20%;
    }

    .max-w-sm-25 {
        max-width: 25%;
    }

    .max-w-sm-33 {
        max-width: 33.333%;
    }

    .max-w-sm-40 {
        max-width: 40%;
    }

    .max-w-sm-50 {
        max-width: 50%;
    }

    .max-w-sm-60 {
        max-width: 60%;
    }

    .max-w-sm-66 {
        max-width: 66.666%;
    }

    .max-w-sm-75 {
        max-width: 75%;
    }

    .max-w-sm-80 {
        max-width: 80%;
    }

    .max-w-sm-90 {
        max-width: 90%;
    }

    .max-w-sm-100 {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .max-w-md-10 {
        max-width: 10%;
    }

    .max-w-md-20 {
        max-width: 20%;
    }

    .max-w-md-25 {
        max-width: 25%;
    }

    .max-w-md-33 {
        max-width: 33.333%;
    }

    .max-w-md-40 {
        max-width: 40%;
    }

    .max-w-md-50 {
        max-width: 50%;
    }

    .max-w-md-60 {
        max-width: 60%;
    }

    .max-w-md-66 {
        max-width: 66.666%;
    }

    .max-w-md-75 {
        max-width: 75%;
    }

    .max-w-md-80 {
        max-width: 80%;
    }

    .max-w-md-90 {
        max-width: 90%;
    }

    .max-w-md-100 {
        max-width: 100%;
    }
}

@media (max-width: 1023px) {
    .max-w-lg-10 {
        max-width: 10%;
    }

    .max-w-lg-20 {
        max-width: 20%;
    }

    .max-w-lg-25 {
        max-width: 25%;
    }

    .max-w-lg-33 {
        max-width: 33.333%;
    }

    .max-w-lg-40 {
        max-width: 40%;
    }

    .max-w-lg-50 {
        max-width: 50%;
    }

    .max-w-lg-60 {
        max-width: 60%;
    }

    .max-w-lg-66 {
        max-width: 66.666%;
    }

    .max-w-lg-75 {
        max-width: 75%;
    }

    .max-w-lg-80 {
        max-width: 80%;
    }

    .max-w-lg-90 {
        max-width: 90%;
    }

    .max-w-lg-100 {
        max-width: 100%;
    }
}

@media (max-width: 1279px) {
    .max-w-xl-10 {
        max-width: 10%;
    }

    .max-w-xl-20 {
        max-width: 20%;
    }

    .max-w-xl-25 {
        max-width: 25%;
    }

    .max-w-xl-33 {
        max-width: 33.333%;
    }

    .max-w-xl-40 {
        max-width: 40%;
    }

    .max-w-xl-50 {
        max-width: 50%;
    }

    .max-w-xl-60 {
        max-width: 60%;
    }

    .max-w-xl-66 {
        max-width: 66.666%;
    }

    .max-w-xl-75 {
        max-width: 75%;
    }

    .max-w-xl-80 {
        max-width: 80%;
    }

    .max-w-xl-90 {
        max-width: 90%;
    }

    .max-w-xl-100 {
        max-width: 100%;
    }
}

@media (max-width: 1535px) {
    .max-w-xxl-10 {
        max-width: 10%;
    }

    .max-w-xxl-20 {
        max-width: 20%;
    }

    .max-w-xxl-25 {
        max-width: 25%;
    }

    .max-w-xxl-33 {
        max-width: 33.333%;
    }

    .max-w-xxl-40 {
        max-width: 40%;
    }

    .max-w-xxl-50 {
        max-width: 50%;
    }

    .max-w-xxl-60 {
        max-width: 60%;
    }

    .max-w-xxl-66 {
        max-width: 66.666%;
    }

    .max-w-xxl-75 {
        max-width: 75%;
    }

    .max-w-xxl-80 {
        max-width: 80%;
    }

    .max-w-xxl-90 {
        max-width: 90%;
    }

    .max-w-xxl-100 {
        max-width: 100%;
    }
}

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

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

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

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

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

[class*=columns-] img:not(.sized) {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

[class*=columns-] picture {
    display: block;
    width: 100%;
    height: auto;
}

    [class*=columns-] picture img {
        width: 100%;
        height: auto;
        display: block;
    }

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}