%flex{
    display: flex;
    align-items: center;
}

.d-flex-center{
    @extend %flex;
    justify-content: center;
}

.d-flex-between{
    @extend %flex;
    justify-content: space-between;
}

.d-flex-left{
    @extend %flex;
    justify-content: flex-start;
}

.d-flex-right{
    @extend %flex;
    justify-content: flex-end;
}

$displays: (
    f: flex,
    i: inline-block,
    b: block,
);

@each $name, $display in $displays {
    .show-mobile__#{$name}{
        @include media($mobile) {
            display: $display;
        }
    
        @include media($desktop) {
            display: none;
        }
    }

    .show-desktop__#{$name} {
        @include media($mobile) {
            display: none;
        }
    
        @include media($desktop) {
            display: $display;
        }
    }
}