/* ===== FLEX CONTAINERS ===== */
.flex,
.flex-row,
.row,
.flex-col,
.col,
.column,
.flex-row-reverse,
.row-r,
.flex-col-reverse,
.col-r,
.column-r,
.flex-wrap,
.flex-nowrap,
.inline-flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

/* ===== FLEX DIRECTION ===== */
.row,
.row-r .flex-row {
    flex-direction: row;
}

.col,
.col-r,
.column,
.column-r,
.flex-col,
.flex-column {
    flex-direction: column;
}

.row-r,
.flex-row-r,
.flex-row-reverse {
    flex-direction: row-reverse;
}

.col-r,
.column-r,
.flex-col-r,
.flex-col-reverse,
.flex-column-reverse {
    flex-direction: column-reverse;
}

/* ===== FLEX WRAP ===== */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* align-items */
.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.items-baseline {
    align-items: baseline;
}

/* align-content */
.content-start {
    align-content: flex-start;
}

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

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

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

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

.content-stretch {
    align-content: stretch;
}

/* align-self */
.self-start {
    align-self: flex-start;
}

.self-center {
    align-self: center;
}

.self-end {
    align-self: flex-end;
}

.self-stretch {
    align-self: stretch;
}

.self-baseline {
    align-self: baseline;
}

/* justify-content */
.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;
}

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


/* Center both axes (flex items) */
.center {
    align-items: center;
    justify-content: center;
}

/* Center main axis */
.center-x {
    justify-content: center;
}

/* Center cross axis */
.center-y {
    align-items: center;
}

.flex-grow {
    flex-grow: 1;
}

.flex-grow-0 {
    flex-grow: 0;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

/* --------------------------
    PADDING / MARGIN / GAP
--------------------------- */

/* Margin Bottom */
.mb-1 {
    margin-bottom: var(--m1);
}

.mb-2 {
    margin-bottom: var(--m2);
}

.mb-3 {
    margin-bottom: var(--m3);
}

.mb-4 {
    margin-bottom: var(--m4);
}

.mb-5 {
    margin-bottom: var(--m5);
}

.mb-6 {
    margin-bottom: var(--m6);
}

/* Margin Top */
.mt-1 {
    margin-top: var(--m1);
}

.mt-2 {
    margin-top: var(--m2);
}

.mt-3 {
    margin-top: var(--m3);
}

.mt-4 {
    margin-top: var(--m4);
}

.mt-5 {
    margin-top: var(--m5);
}

.mt-6 {
    margin-top: var(--m6);
}

/* Margin Left */
.ml-1 {
    margin-left: var(--m1);
}

.ml-2 {
    margin-left: var(--m2);
}

.ml-3 {
    margin-left: var(--m3);
}

.ml-4 {
    margin-left: var(--m4);
}

.ml-5 {
    margin-left: var(--m5);
}

.ml-6 {
    margin-left: var(--m6);
}

/* Margin Right */
.mr-1 {
    margin-right: var(--m1);
}

.mr-2 {
    margin-right: var(--m2);
}

.mr-3 {
    margin-right: var(--m3);
}

.mr-4 {
    margin-right: var(--m4);
}

.mr-5 {
    margin-right: var(--m5);
}

.mr-6 {
    margin-right: var(--m6);
}

/* Margin X (left & right) */
.mx-1 {
    margin-left: var(--m1);
    margin-right: var(--m1);
}

.mx-2 {
    margin-left: var(--m2);
    margin-right: var(--m2);
}

.mx-3 {
    margin-left: var(--m3);
    margin-right: var(--m3);
}

.mx-4 {
    margin-left: var(--m4);
    margin-right: var(--m4);
}

.mx-5 {
    margin-left: var(--m5);
    margin-right: var(--m5);
}

.mx-6 {
    margin-left: var(--m6);
    margin-right: var(--m6);
}

/* Margin Y (top & bottom) */
.my-1 {
    margin-top: var(--m1);
    margin-bottom: var(--m1);
}

.my-2 {
    margin-top: var(--m2);
    margin-bottom: var(--m2);
}

.my-3 {
    margin-top: var(--m3);
    margin-bottom: var(--m3);
}

.my-4 {
    margin-top: var(--m4);
    margin-bottom: var(--m4);
}

.my-5 {
    margin-top: var(--m5);
    margin-bottom: var(--m5);
}

.my-6 {
    margin-top: var(--m6);
    margin-bottom: var(--m6);
}

/* Margin (all sides) */
.m-1 {
    margin: var(--m1);
}

.m-2 {
    margin: var(--m2);
}

.m-3 {
    margin: var(--m3);
}

.m-4 {
    margin: var(--m4);
}

.m-5 {
    margin: var(--m5);
}

.m-6 {
    margin: var(--m6);
}

/* Padding (all sides) */
.p-1 {
    padding: var(--p1);
}

.p-2 {
    padding: var(--p2);
}

.p-3 {
    padding: var(--p3);
}

.p-4 {
    padding: var(--p4);
}

.p-5 {
    padding: var(--p5);
}

.p-6 {
    padding: var(--p6);
}

/* Padding Top */
.pt-1 {
    padding-top: var(--p1);
}

.pt-2 {
    padding-top: var(--p2);
}

.pt-3 {
    padding-top: var(--p3);
}

.pt-4 {
    padding-top: var(--p4);
}

.pt-5 {
    padding-top: var(--p5);
}

.pt-6 {
    padding-top: var(--p6);
}

/* Padding Bottom */
.pb-1 {
    padding-bottom: var(--p1);
}

.pb-2 {
    padding-bottom: var(--p2);
}

.pb-3 {
    padding-bottom: var(--p3);
}

.pb-4 {
    padding-bottom: var(--p4);
}

.pb-5 {
    padding-bottom: var(--p5);
}

.pb-6 {
    padding-bottom: var(--p6);
}

/* Padding Left */
.pl-1 {
    padding-left: var(--p1);
}

.pl-2 {
    padding-left: var(--p2);
}

.pl-3 {
    padding-left: var(--p3);
}

.pl-4 {
    padding-left: var(--p4);
}

.pl-5 {
    padding-left: var(--p5);
}

.pl-6 {
    padding-left: var(--p6);
}

/* Padding Right */
.pr-1 {
    padding-right: var(--p1);
}

.pr-2 {
    padding-right: var(--p2);
}

.pr-3 {
    padding-right: var(--p3);
}

.pr-4 {
    padding-right: var(--p4);
}

.pr-5 {
    padding-right: var(--p5);
}

.pr-6 {
    padding-right: var(--p6);
}

/* Padding X (left & right) */
.px-1 {
    padding-left: var(--p1);
    padding-right: var(--p1);
}

.px-2 {
    padding-left: var(--p2);
    padding-right: var(--p2);
}

.px-3 {
    padding-left: var(--p3);
    padding-right: var(--p3);
}

.px-4 {
    padding-left: var(--p4);
    padding-right: var(--p4);
}

.px-5 {
    padding-left: var(--p5);
    padding-right: var(--p5);
}

.px-6 {
    padding-left: var(--p6);
    padding-right: var(--p6);
}

/* Padding Y (top & bottom) */
.py-1 {
    padding-top: var(--p1);
    padding-bottom: var(--p1);
}

.py-2 {
    padding-top: var(--p2);
    padding-bottom: var(--p2);
}

.py-3 {
    padding-top: var(--p3);
    padding-bottom: var(--p3);
}

.py-4 {
    padding-top: var(--p4);
    padding-bottom: var(--p4);
}

.py-5 {
    padding-top: var(--p5);
    padding-bottom: var(--p5);
}

.py-6 {
    padding-top: var(--p6);
    padding-bottom: var(--p6);
}

/* Gap */
.g-1 {
    gap: var(--g1);
}

.g-2 {
    gap: var(--g2);
}

.g-3 {
    gap: var(--g3);
}

.g-4 {
    gap: var(--g4);
}

.g-5 {
    gap: var(--g5);
}

.g-6 {
    gap: var(--g6);
}

/* Column Gap */
.gx-1 {
    column-gap: var(--g1);
}

.gx-2 {
    column-gap: var(--g2);
}

.gx-3 {
    column-gap: var(--g3);
}

.gx-4 {
    column-gap: var(--g4);
}

.gx-5 {
    column-gap: var(--g5);
}

.gx-6 {
    column-gap: var(--g6);
}

/* Row Gap */
.gy-1 {
    row-gap: var(--g1);
}

.gy-2 {
    row-gap: var(--g2);
}

.gy-3 {
    row-gap: var(--g3);
}

.gy-4 {
    row-gap: var(--g4);
}

.gy-5 {
    row-gap: var(--g5);
}

.gy-6 {
    row-gap: var(--g6);
}

/* ----------------------
        SIZING
----------------------- */

.w-1 {
    width: 8.33%;
}

.w-2 {
    width: 16.66%;
}

.w-3 {
    width: 25%;
}

.w-4 {
    width: 33.33%;
}

.w-5 {
    width: 41.66%;
}

.w-6 {
    width: 50%;
}

.w-7 {
    width: 58.33%;
}

.w-8 {
    width: 66.66%;
}

.w-9 {
    width: 75%;
}

.w-10 {
    width: 83.33%;
}

.w-11 {
    width: 91.66%;
}

.w-12,
.max-width,
.w-full,
.w-max {
    width: 100%;
}

.w-screen {
    width: 100vw;
}

.h-1 {
    height: 8.33%;
}

.h-2 {
    height: 16.66%;
}

.h-3 {
    height: 25%;
}

.h-4 {
    height: 33.33%;
}

.h-5 {
    height: 41.66%;
}

.h-6 {
    height: 50%;
}

.h-7 {
    height: 58.33%;
}

.h-8 {
    height: 66.66%;
}

.h-9 {
    height: 75%;
}

.h-10 {
    height: 83.33%;
}

.h-11 {
    height: 91.66%;
}

.h-12,
.max-height,
.h-full,
.h-max {
    height: 100%;
}

.h-screen {
    height: 100vh;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.overlay-icons img {
    height: 128px;
    width: 128px;
}

.overlay-icons img:not(:first-of-type) {
    position: absolute;
}

.rotate-right {
    animation: rotate360 60s linear infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.rotate-left {
    animation: rotate360 60s linear infinite reverse;
    transform-origin: center;
    transform-box: fill-box;
}