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

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

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

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

.is-flex-gap-10p {
    gap: 10%;
}

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

/* Tablet */
@media (min-width: 769px) {
    .is-order-0-tablet { order: 0; }
    .is-order-1-tablet { order: 1; }
    .is-order-2-tablet { order: 2; }
    .is-order-3-tablet { order: 3; }
    .is-order-4-tablet { order: 4; }
}

/* Desktop */
@media (min-width: 1024px) {
    .is-order-0-desktop { order: 0; }
    .is-order-1-desktop { order: 1; }
    .is-order-2-desktop { order: 2; }
    .is-order-3-desktop { order: 3; }
    .is-order-4-desktop { order: 4; }
}

/* Widescreen */
@media (min-width: 1216px) {
    .is-order-0-widescreen { order: 0; }
    .is-order-1-widescreen { order: 1; }
    .is-order-2-widescreen { order: 2; }
    .is-order-3-widescreen { order: 3; }
    .is-order-4-widescreen { order: 4; }
}

/* FullHD */
@media (min-width: 1408px) {
    .is-order-0-fullhd { order: 0; }
    .is-order-1-fullhd { order: 1; }
    .is-order-2-fullhd { order: 2; }
    .is-order-3-fullhd { order: 3; }
    .is-order-4-fullhd { order: 4; }
}