//responsive mixin
@mixin responsive($device) {
    @if $device == big-screen {
        @media only screen and (max-width: 1920px) {
            @content;
        }
    }
    @if $device == medium-screen {
        @media only screen and (max-width: 1400px) {
            @content;
        }
    }
    @if $device == small-screen {
        @media only screen and (max-width: 1200px) {
            @content;
        }
    }
    @if $device == tablet-portrait {
        @media only screen and (max-width: 992px) {
            @content;
        }
    }
    @if $device == tablet {
        @media only screen and (max-width: 768px) {
            @content;
        }
    }
    @if $device == mobile {
        @media only screen and (max-width: 576px) {
            @content;
        }
    }
}