.display-flex {
    display: flex;
}

.display-grid {
    display: grid;
}

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

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

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

.l-flex-show {
    display: none !important;
}

.m-flex-show {
    display: none !important;
}

.s-flex-show {
    display: none !important;
}

@media (--l) {
    .l-flex-hide {
        display: none !important;
    }

    .l-flex-show {
        display: flex !important;
    }

    .l-flex-column {
        flex-direction: column !important;
    }

    .l-flex-row {
        flex-direction: row !important;
    }

    .l-flex-column-reverse {
        flex-direction: column-reverse !important;
    }
    
    .l-flex-row-reverse {
        flex-direction: row-reverse !important;
    }
}

@media (--m) {
    .m-flex-hide {
        display: none !important;
    }

    .m-flex-show {
        display: flex !important;
    }

    .m-flex-column {
        flex-direction: column !important;
    }

    .m-flex-row {
        flex-direction: row !important;
    }

    .m-flex-column-reverse {
        flex-direction: column-reverse !important;
    }
    
    .m-flex-row-reverse {
        flex-direction: row-reverse !important;
    }
}

@media (--s) {
    .s-flex-hide {
        display: none !important;
    }

    .s-flex-show {
        display: flex !important;
    }

    .s-flex-column {
        flex-direction: column !important;
    }

    .s-flex-row {
        flex-direction: row !important;
    }

    .s-flex-column-reverse {
        flex-direction: column-reverse !important;
    }
    
    .s-flex-row-reverse {
        flex-direction: row-reverse !important;
    }
}