/* ===== 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;
}