/*
    -----------------------------------------
    FLEXBOX UTILITIES
    -----------------------------------------
*/

/* GAPS */

.no-gap {
    gap: 0 !important;
}

.gap-0-5 {
    gap: .5rem !important;
}

.gap-1 {
    gap: 1rem !important;
}

.gap-1-5 {
    gap: 1.5rem !important;
}

.gap-2 {
    gap: 2rem !important;
}

.gap-3 {
    gap: 3rem !important;
}

.gap-4 {
    gap: 4rem !important ;
}

/* FLEX SIZES */
/*
    -----------------------------------------
    FLEX SIZES
    Must be used together with above .gap- classes in order to work as expected
    -----------------------------------------
    Example HTML with 1.5rem gap:
    <div class="container-x d-flex flex-wrap gap-1-5">		
		<div class="flex-sm-50 flex-md-33 flex-lg-25 flex-xl-20 flex-100" style="background-color: black; aspect-ratio: 1/1;"></div>
		<div class="flex-sm-50 flex-md-33 flex-lg-25 flex-xl-20 flex-100" style="background-color: black; aspect-ratio: 1/1;"></div>
		<div class="flex-sm-50 flex-md-33 flex-lg-25 flex-xl-20 flex-100" style="background-color: black; aspect-ratio: 1/1;"></div>
		<div class="flex-sm-50 flex-md-33 flex-lg-25 flex-xl-20 flex-100" style="background-color: black; aspect-ratio: 1/1;"></div>
		<div class="flex-sm-50 flex-md-33 flex-lg-25 flex-xl-20 flex-100" style="background-color: black; aspect-ratio: 1/1;"></div>
    </div>
*/

.flex-100 {
    flex-basis: 100%;
}

/* 50% flex-basis */
.no-gap > .flex-50 {
    flex-basis: 50%;
}

.gap-0-5 > .flex-50 {
    flex-basis: calc(50% - 0.25rem);
}

.gap-1 > .flex-50 {
    flex-basis: calc(50% - 0.5rem);
}

.gap-1-5 > .flex-50 {
    flex-basis: calc(50% - 0.75rem);
}

.gap-2 > .flex-50 {
    flex-basis: calc(50% - 1rem);
}

.gap-3 > .flex-50 {
    flex-basis: calc(50% - 1.5rem);
}

.gap-4 > .flex-50 {
    flex-basis: calc(50% - 2rem);
}

@media (min-width: 576px) {
    /* 20% flex-basis */
    .no-gap > .flex-sm-20 {
        flex-basis: 20%;
    }

    .gap-0-5 > .flex-sm-20 {
        flex-basis: calc(20% - 0.4rem);
    }
    .gap-1 > .flex-sm-20 {
        flex-basis: calc(20% - 0.8rem);
    }
    .gap-1-5 > .flex-sm-20 {
        flex-basis: calc(20% - 1.2rem);
    }
    .gap-2 > .flex-sm-20 {
        flex-basis: calc(20% - 1.6rem);
    }
    .gap-3 > .flex-sm-20 {
        flex-basis: calc(20% - 2.4rem);
    }
    .gap-4 > .flex-sm-20 {
        flex-basis: calc(20% - 3.2rem);
    }

    /* 25% flex-basis */
    .no-gap > .flex-sm-25 {
        flex-basis: 25%;
    }
    .gap-0-5 > .flex-sm-25 {
        flex-basis: calc(25% - 0.375rem);
    }
    .gap-1 > .flex-sm-25 {
        flex-basis: calc(25% - 0.75rem);
    }
    .gap-1-5 > .flex-sm-25 {
        flex-basis: calc(25% - 1.125rem);
    }
    .gap-2 > .flex-sm-25 {
        flex-basis: calc(25% - 1.5rem);
    }
    .gap-3 > .flex-sm-25 {
        flex-basis: calc(25% - 2.25rem);
    }
    .gap-4 > .flex-sm-25 {
        flex-basis: calc(25% - 3rem);
    }

    /* 33% flex-basis */
    .no-gap > .flex-sm-33 {
        flex-basis: 33%;
    }

    .gap-0-5 > .flex-sm-33 {
        flex-basis: calc(33.333% - 0.333rem);
    }

    .gap-1 > .flex-sm-33 {
        flex-basis: calc(33.333% - 0.667rem);
    }

    .gap-1-5 > .flex-sm-33 {
        flex-basis: calc(33.333% - 1rem);
    }

    .gap-2 > .flex-sm-33 {
        flex-basis: calc(33.333% - 1.333rem);
    }

    .gap-3 > .flex-sm-33 {
        flex-basis: calc(33.333% - 2rem);
    }

    .gap-4 > .flex-sm-33 {
        flex-basis: calc(33.333% - 2.667rem);
    }

    /* 50% flex-basis */
    .no-gap > .flex-sm-50 {
        flex-basis: 50%;
    }

    .gap-0-5 > .flex-sm-50 {
        flex-basis: calc(50% - 0.25rem);
    }

    .gap-1 > .flex-sm-50 {
        flex-basis: calc(50% - 0.5rem);
    }

    .gap-1-5 > .flex-sm-50 {
        flex-basis: calc(50% - 0.75rem);
    }

    .gap-2 > .flex-sm-50 {
        flex-basis: calc(50% - 1rem);
    }

    .gap-3 > .flex-sm-50 {
        flex-basis: calc(50% - 1.5rem);
    }

    .gap-4 > .flex-sm-50 {
        flex-basis: calc(50% - 2rem);
    }
}

@media (min-width: 768px) {
    /* 20% flex-basis */
    .no-gap > .flex-md-20 {
        flex-basis: 20%;
    }
    .gap-0-5 > .flex-md-20 {
        flex-basis: calc(20% - 0.4rem);
    }
    .gap-1 > .flex-md-20 {
        flex-basis: calc(20% - 0.8rem);
    }
    .gap-1-5 > .flex-md-20 {
        flex-basis: calc(20% - 1.2rem);
    }
    .gap-2 > .flex-md-20 {
        flex-basis: calc(20% - 1.6rem);
    }
    .gap-3 > .flex-md-20 {
        flex-basis: calc(20% - 2.4rem);
    }
    .gap-4 > .flex-md-20 {
        flex-basis: calc(20% - 3.2rem);
    }

    /* 25% flex-basis */
    .no-gap > .flex-md-25 {
        flex-basis: 25%;
    }
    .gap-0-5 > .flex-md-25 {
        flex-basis: calc(25% - 0.375rem);
    }

    .gap-1 > .flex-md-25 {
        flex-basis: calc(25% - 0.75rem);
    }

    .gap-1-5 > .flex-md-25 {
        flex-basis: calc(25% - 1.125rem);
    }

    .gap-2 > .flex-md-25 {
        flex-basis: calc(25% - 1.5rem);
    }

    .gap-3 > .flex-md-25 {
        flex-basis: calc(25% - 2.25rem);
    }

    .gap-4 > .flex-md-25 {
        flex-basis: calc(25% - 3rem);
    }

    /* 33% flex-basis */
    .no-gap > .flex-md-33 {
        flex-basis: 33%;
    }
    .gap-0-5 > .flex-md-33 {
        flex-basis: calc(33.333% - 0.333rem);
    }

    .gap-1 > .flex-md-33 {
        flex-basis: calc(33.333% - 0.667rem);
    }

    .gap-1-5 > .flex-md-33 {
        flex-basis: calc(33.333% - 1rem);
    }

    .gap-2 > .flex-md-33 {
        flex-basis: calc(33.333% - 1.333rem);
    }

    .gap-3 > .flex-md-33 {
        flex-basis: calc(33.333% - 2rem);
    }

    .gap-4 > .flex-md-33 {
        flex-basis: calc(33.333% - 2.667rem);
    }

    /* 50% flex-basis */
    .no-gap > .flex-md-50 {
        flex-basis: 50%;
    }

    .gap-0-5 > .flex-md-50 {
        flex-basis: calc(50% - 0.25rem);
    }

    .gap-1 > .flex-md-50 {
        flex-basis: calc(50% - 0.5rem);
    }

    .gap-1-5 > .flex-md-50 {
        flex-basis: calc(50% - 0.75rem);
    }

    .gap-2 > .flex-md-50 {
        flex-basis: calc(50% - 1rem);
    }

    .gap-3 > .flex-md-50 {
        flex-basis: calc(50% - 1.5rem);
    }

    .gap-4 > .flex-md-50 {
        flex-basis: calc(50% - 2rem);
    }
}

@media (min-width: 992px) {
    /* 20% flex-basis */
    .no-gap > .flex-lg-20 {
        flex-basis: 20%;
    }
    .gap-0-5 > .flex-lg-20 {
        flex-basis: calc(20% - 0.4rem);
    }
    .gap-1 > .flex-lg-20 {
        flex-basis: calc(20% - 0.8rem);
    }
    .gap-1-5 > .flex-lg-20 {
        flex-basis: calc(20% - 1.2rem);
    }
    .gap-2 > .flex-lg-20 {
        flex-basis: calc(20% - 1.6rem);
    }
    .gap-3 > .flex-lg-20 {
        flex-basis: calc(20% - 2.4rem);
    }
    .gap-4 > .flex-lg-20 {
        flex-basis: calc(20% - 3.2rem);
    }

    /* 25% flex-basis */
    .no-gap > .flex-lg-25 {
        flex-basis: 25%;
    }
    .gap-0-5 > .flex-lg-25 {
        flex-basis: calc(25% - 0.375rem);
    }

    .gap-1 > .flex-lg-25 {
        flex-basis: calc(25% - 0.75rem);
    }

    .gap-1-5 > .flex-lg-25 {
        flex-basis: calc(25% - 1.125rem);
    }

    .gap-2 > .flex-lg-25 {
        flex-basis: calc(25% - 1.5rem);
    }

    .gap-3 > .flex-lg-25 {
        flex-basis: calc(25% - 2.25rem);
    }

    .gap-4 > .flex-lg-25 {
        flex-basis: calc(25% - 3rem);
    }

    /* 33% flex-basis */
    .no-gap > .flex-lg-33 {
        flex-basis: 33%;
    }
    .gap-0-5 > .flex-lg-33 {
        flex-basis: calc(33.333% - 0.333rem);
    }

    .gap-1 > .flex-lg-33 {
        flex-basis: calc(33.333% - 0.667rem);
    }

    .gap-1-5 > .flex-lg-33 {
        flex-basis: calc(33.333% - 1rem);
    }

    .gap-2 > .flex-lg-33 {
        flex-basis: calc(33.333% - 1.333rem);
    }

    .gap-3 > .flex-lg-33 {
        flex-basis: calc(33.333% - 2rem);
    }

    .gap-4 > .flex-lg-33 {
        flex-basis: calc(33.333% - 2.667rem);
    }

    /* 50% flex-basis */
    .no-gap > .flex-lg-50 {
        flex-basis: 50%;
    }
    .gap-0-5 > .flex-lg-50 {
        flex-basis: calc(50% - 0.25rem);
    }

    .gap-1 > .flex-lg-50 {
        flex-basis: calc(50% - 0.5rem);
    }

    .gap-1-5 > .flex-lg-50 {
        flex-basis: calc(50% - 0.75rem);
    }

    .gap-2 > .flex-lg-50 {
        flex-basis: calc(50% - 1rem);
    }

    .gap-3 > .flex-lg-50 {
        flex-basis: calc(50% - 1.5rem);
    }

    .gap-4 > .flex-lg-50 {
        flex-basis: calc(50% - 2rem);
    }
}

@media (min-width: 1200px) {
    /* 20% flex-basis */
    .no-gap > .flex-xl-20 {
        flex-basis: 20%;
    }
    .gap-0-5 > .flex-xl-20 {
        flex-basis: calc(20% - 0.4rem);
    }
    .gap-1 > .flex-xl-20 {
        flex-basis: calc(20% - 0.8rem);
    }
    .gap-1-5 > .flex-xl-20 {
        flex-basis: calc(20% - 1.2rem);
    }
    .gap-2 > .flex-xl-20 {
        flex-basis: calc(20% - 1.6rem);
    }
    .gap-3 > .flex-xl-20 {
        flex-basis: calc(20% - 2.4rem);
    }
    .gap-4 > .flex-xl-20 {
        flex-basis: calc(20% - 3.2rem);
    }

    /* 25% flex-basis */
    .no-gap > .flex-xl-25 {
        flex-basis: 25%;
    }
    .gap-0-5 > .flex-xl-25 {
        flex-basis: calc(25% - 0.375rem);
    }

    .gap-1 > .flex-xl-25 {
        flex-basis: calc(25% - 0.75rem);
    }

    .gap-1-5 > .flex-xl-25 {
        flex-basis: calc(25% - 1.125rem);
    }

    .gap-2 > .flex-xl-25 {
        flex-basis: calc(25% - 1.5rem);
    }

    .gap-3 > .flex-xl-25 {
        flex-basis: calc(25% - 2.25rem);
    }

    .gap-4 > .flex-xl-25 {
        flex-basis: calc(25% - 3rem);
    }

    /* 33% flex-basis */
    .no-gap > .flex-xl-33 {
        flex-basis: 33%;
    }
    .gap-0-5 > .flex-xl-33 {
        flex-basis: calc(33.333% - 0.333rem);
    }

    .gap-1 > .flex-xl-33 {
        flex-basis: calc(33.333% - 0.667rem);
    }

    .gap-1-5 > .flex-xl-33 {
        flex-basis: calc(33.333% - 1rem);
    }

    .gap-2 > .flex-xl-33 {
        flex-basis: calc(33.333% - 1.333rem);
    }

    .gap-3 > .flex-xl-33 {
        flex-basis: calc(33.333% - 2rem);
    }

    .gap-4 > .flex-xl-33 {
        flex-basis: calc(33.333% - 2.667rem);
    }

    /* 50% flex-basis */
    .no-gap > .flex-xl-50 {
        flex-basis: 50%;
    }
    .gap-0-5 > .flex-xl-50 {
        flex-basis: calc(50% - 0.25rem);
    }

    .gap-1 > .flex-xl-50 {
        flex-basis: calc(50% - 0.5rem);
    }

    .gap-1-5 > .flex-xl-50 {
        flex-basis: calc(50% - 0.75rem);
    }

    .gap-2 > .flex-xl-50 {
        flex-basis: calc(50% - 1rem);
    }

    .gap-3 > .flex-xl-50 {
        flex-basis: calc(50% - 1.5rem);
    }

    .gap-4 > .flex-xl-50 {
        flex-basis: calc(50% - 2rem);
    }
}

@media (min-width: 1600px) {
    /* 20% flex-basis */
    .no-gap > .flex-xxl-20 {
        flex-basis: 20%;
    }
    .gap-0-5 > .flex-xxl-20 {
        flex-basis: calc(20% - 0.4rem);
    }
    .gap-1 > .flex-xxl-20 {
        flex-basis: calc(20% - 0.8rem);
    }
    .gap-1-5 > .flex-xxl-20 {
        flex-basis: calc(20% - 1.2rem);
    }
    .gap-2 > .flex-xxl-20 {
        flex-basis: calc(20% - 1.6rem);
    }
    .gap-3 > .flex-xxl-20 {
        flex-basis: calc(20% - 2.4rem);
    }
    .gap-4 > .flex-xxl-20 {
        flex-basis: calc(20% - 3.2rem);
    }

    /* 25% flex-basis */
    .no-gap > .flex-xxl-25 {
        flex-basis: 25%;
    }
    .gap-0-5 > .flex-xxl-25 {
        flex-basis: calc(25% - 0.375rem);
    }

    .gap-1 > .flex-xxl-25 {
        flex-basis: calc(25% - 0.75rem);
    }

    .gap-1-5 > .flex-xxl-25 {
        flex-basis: calc(25% - 1.125rem);
    }

    .gap-2 > .flex-xxl-25 {
        flex-basis: calc(25% - 1.5rem);
    }

    .gap-3 > .flex-xxl-25 {
        flex-basis: calc(25% - 2.25rem);
    }

    .gap-4 > .flex-xxl-25 {
        flex-basis: calc(25% - 3rem);
    }

    /* 33% flex-basis */
    .no-gap > .flex-xxl-33 {
        flex-basis: 33%;
    }
    .gap-0-5 > .flex-xxl-33 {
        flex-basis: calc(33.333% - 0.333rem);
    }

    .gap-1 > .flex-xxl-33 {
        flex-basis: calc(33.333% - 0.667rem);
    }

    .gap-1-5 > .flex-xxl-33 {
        flex-basis: calc(33.333% - 1rem);
    }

    .gap-2 > .flex-xxl-33 {
        flex-basis: calc(33.333% - 1.333rem);
    }

    .gap-3 > .flex-xxl-33 {
        flex-basis: calc(33.333% - 2rem);
    }

    .gap-4 > .flex-xxl-33 {
        flex-basis: calc(33.333% - 2.667rem);
    }

    /* 50% flex-basis */
    .no-gap > .flex-xxl-50 {
        flex-basis: 50%;
    }
    .gap-0-5 > .flex-xxl-50 {
        flex-basis: calc(50% - 0.25rem);
    }

    .gap-1 > .flex-xxl-50 {
        flex-basis: calc(50% - 0.5rem);
    }

    .gap-1-5 > .flex-xxl-50 {
        flex-basis: calc(50% - 0.75rem);
    }

    .gap-2 > .flex-xxl-50 {
        flex-basis: calc(50% - 1rem);
    }

    .gap-3 > .flex-xxl-50 {
        flex-basis: calc(50% - 1.5rem);
    }

    .gap-4 > .flex-xxl-50 {
        flex-basis: calc(50% - 2rem);
    }
}