@import '../1-Helpers/variables';

.hide-on {
    &-mobile {
        @media screen and (max-width: $breakpoint-mobile) {
            display: none !important;
        }
    }

    &-tablet-and-down {
        @media screen and (max-width: $breakpoint-tablet) {
            display: none !important;
        }
    }

    &-tablet-and-up {
        @media screen and (min-width: $breakpoint-mobile) {
            display: none !important;
        }
    }

    &-laptop-and-up {
        @media screen and (min-width: $breakpoint-tablet) {
            display: none !important;
        }
    }
}

.show-on {
    &-mobile-only {
        @media screen and (min-width: $breakpoint-mobile) {
            display: none !important;
        }
    }

    &-laptop-and-above, &-laptop-and-up {
        @media screen and (max-width: $breakpoint-tablet) {
            display: none !important;
        }
    }
}