// Clearfix
//----------------------------------------------------------

@mixin clearfix {

    &::before,
    &::after {
        content: ' ';
        display: table;
    }

    &::after {
        clear: both;
    }
}


// All Above Media Query Mixin
// ---------------------------------------------------------

@mixin from($breakpoint) {
    @media screen and (min-width: $breakpoint) {
        @content;
    }
}

// All Under Media Query Mixin
// ---------------------------------------------------------

@mixin to($breakpoint) {
    @media screen and (max-width: $breakpoint - 1px) {
        @content;
    }
}

// Between Two Devices Media Query Mixin
// ---------------------------------------------------------
@mixin between($start, $end) {
    @media screen and (min-width: $start) and (max-width: $end - 1px) {
        @content;
    }
}