.is-flex-basis-40p {
    flex-basis: 40%;
}

.is-flex-basis-60p {
    flex-basis: 60%;
}

.is-flex-gap-5px { gap: 5px; }

.is-flex-column-gap-5px { column-gap: 5px; }
.is-flex-column-gap-10px { column-gap: 10px; }
.is-flex-column-gap-20px { column-gap: 20px; }
.is-flex-column-gap-24px { column-gap: 24px; }
.is-flex-column-gap-50px { column-gap: 50px; }

.is-flex-row-gap-5px { row-gap: 5px; }
.is-flex-row-gap-10px { row-gap: 10px; }
.is-flex-row-gap-20px { row-gap: 20px; }
.is-flex-row-gap-24px { row-gap: 24px; }
.is-flex-row-gap-50px { row-gap: 50px; }

.is-flex-gap-10px { gap: 10px; }
.is-flex-gap-20px { gap: 20px; }
.is-flex-gap-24px { gap: 24px; }
.is-flex-gap-50px { gap: 50px; }

.is-flex-basis-0 {
    flex-basis: 0;
}

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

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

/* Base classes are typically mobile-first, applying to all sizes unless overridden */
.is-order-0 { order: 0 !important; }
.is-order-1 { order: 1 !important; }
.is-order-2 { order: 2 !important; }
.is-order-3 { order: 3 !important; }
.is-order-4 { order: 4 !important; }
.is-order-5 { order: 5 !important; }
.is-order-6 { order: 6 !important; }
.is-order-7 { order: 7 !important; }
.is-order-8 { order: 8 !important; }
.is-order-9 { order: 9 !important; }

/* Tablet */
@media (min-width: 769px) {
    .is-order-0-tablet { order: 0 !important; }
    .is-order-1-tablet { order: 1 !important; }
    .is-order-2-tablet { order: 2 !important; }
    .is-order-3-tablet { order: 3 !important; }
    .is-order-4-tablet { order: 4 !important; }
    .is-order-5-tablet { order: 5 !important; }
    .is-order-6-tablet { order: 6 !important; }
    .is-order-7-tablet { order: 7 !important; }
    .is-order-8-tablet { order: 8 !important; }
    .is-order-9-tablet { order: 9 !important; }
}

/* Desktop */
@media (min-width: 1024px) {
    .is-order-0-desktop { order: 0 !important; }
    .is-order-1-desktop { order: 1 !important; }
    .is-order-2-desktop { order: 2 !important; }
    .is-order-3-desktop { order: 3 !important; }
    .is-order-4-desktop { order: 4 !important; }
    .is-order-5-desktop { order: 5 !important; }
    .is-order-6-desktop { order: 6 !important; }
    .is-order-7-desktop { order: 7 !important; }
    .is-order-8-desktop { order: 8 !important; }
    .is-order-9-desktop { order: 9 !important; }
}

/* Widescreen */
@media (min-width: 1216px) {
    .is-order-0-widescreen { order: 0 !important; }
    .is-order-1-widescreen { order: 1 !important; }
    .is-order-2-widescreen { order: 2 !important; }
    .is-order-3-widescreen { order: 3 !important; }
    .is-order-4-widescreen { order: 4 !important; }
    .is-order-5-widescreen { order: 5 !important; }
    .is-order-6-widescreen { order: 6 !important; }
    .is-order-7-widescreen { order: 7 !important; }
    .is-order-8-widescreen { order: 8 !important; }
    .is-order-9-widescreen { order: 9 !important; }
}

/* FullHD */
@media (min-width: 1408px) {
    .is-order-0-fullhd { order: 0 !important; }
    .is-order-1-fullhd { order: 1 !important; }
    .is-order-2-fullhd { order: 2 !important; }
    .is-order-3-fullhd { order: 3 !important; }
    .is-order-4-fullhd { order: 4 !important; }
    .is-order-5-fullhd { order: 5 !important; }
    .is-order-6-fullhd { order: 6 !important; }
    .is-order-7-fullhd { order: 7 !important; }
    .is-order-8-fullhd { order: 8 !important; }
    .is-order-9-fullhd { order: 9 !important; }
}

/* Mobile */
@media (max-width: 768px) {
    .is-flex-direction-row-mobile { flex-direction: row !important; }
    .is-flex-direction-row-reverse-mobile { flex-direction: row-reverse !important; }
    .is-flex-direction-column-mobile { flex-direction: column !important; }
    .is-flex-direction-column-reverse-mobile { flex-direction: column-reverse !important; }

    .is-align-items-start-mobile { align-items: flex-start !important; }
    .is-align-items-end-mobile { align-items: flex-end !important; }

    .is-justify-content-flex-start-mobile { justify-content: flex-start !important; }
    .is-justify-content-flex-end-mobile { justify-content: flex-end !important; }
    .is-justify-content-center-mobile { justify-content: center !important; }
    .is-justify-content-space-between-mobile { justify-content: space-between !important; }
}

/* Tablet */
@media (min-width: 769px) {
    .is-flex-direction-row-tablet { flex-direction: row !important; }
    .is-flex-direction-row-reverse-tablet { flex-direction: row-reverse !important; }
    .is-flex-direction-column-tablet { flex-direction: column !important; }
    .is-flex-direction-column-reverse-tablet { flex-direction: column-reverse !important; }

    .is-align-items-start-tablet { align-items: flex-start !important; }
    .is-align-items-end-tablet { align-items: flex-end !important; }

    .is-justify-content-flex-start-tablet { justify-content: flex-start !important; }
    .is-justify-content-flex-end-tablet { justify-content: flex-end !important; }
    .is-justify-content-center-tablet { justify-content: center !important; }
    .is-justify-content-space-between-tablet { justify-content: space-between !important; }
}

/* Desktop */
@media (min-width: 1024px) {
    .is-flex-direction-row-desktop { flex-direction: row !important; }
    .is-flex-direction-row-reverse-desktop { flex-direction: row-reverse !important; }
    .is-flex-direction-column-desktop { flex-direction: column !important; }
    .is-flex-direction-column-reverse-desktop { flex-direction: column-reverse !important; }

    .is-align-items-start-desktop { align-items: flex-start !important; }
    .is-align-items-end-desktop { align-items: flex-end !important; }

    .is-justify-content-flex-start-desktop { justify-content: flex-start !important; }
    .is-justify-content-flex-end-desktop { justify-content: flex-end !important; }
    .is-justify-content-center-desktop { justify-content: center !important; }
    .is-justify-content-space-between-desktop { justify-content: space-between !important; }
}

/* Widescreen */
@media (min-width: 1216px) {
    .is-flex-direction-row-widescreen { flex-direction: row !important; }
    .is-flex-direction-row-reverse-widescreen { flex-direction: row-reverse !important; }
    .is-flex-direction-column-widescreen { flex-direction: column !important; }
    .is-flex-direction-column-reverse-widescreen { flex-direction: column-reverse !important; }

    .is-align-items-start-widescreen { align-items: flex-start !important; }
    .is-align-items-end-widescreen { align-items: flex-end !important; }

    .is-justify-content-flex-start-widescreen { justify-content: flex-start !important; }
    .is-justify-content-flex-end-widescreen { justify-content: flex-end !important; }
    .is-justify-content-center-widescreen { justify-content: center !important; }
    .is-justify-content-space-between-widescreen { justify-content: space-between !important; }
}

/* FullHD */
@media (min-width: 1408px) {
    .is-flex-direction-row-fullhd { flex-direction: row !important; }
    .is-flex-direction-row-reverse-fullhd { flex-direction: row-reverse !important; }
    .is-flex-direction-column-fullhd { flex-direction: column !important; }
    .is-flex-direction-column-reverse-fullhd { flex-direction: column-reverse !important; }

    .is-align-items-start-fullhd { align-items: flex-start !important; }
    .is-align-items-end-fullhd { align-items: flex-end !important; }

    .is-justify-content-flex-start-fullhd { justify-content: flex-start !important; }
    .is-justify-content-flex-end-fullhd { justify-content: flex-end !important; }
    .is-justify-content-center-fullhd { justify-content: center !important; }
    .is-justify-content-space-between-fullhd { justify-content: space-between !important; }
}