// Variable overrides
$red: #FF0000;
$green: #A8EA99;
$gray: #EAEAEA;
$yellow: #FFC055;
$white: #fff;
$black: #1C1C1C;
$primary:#64B8F4;
$blue:#0022FF;
$borderColor: #D8DBE0;
$dark:#636f83;
$mobile-width: 425px;
$tablet-width: 768px;
$desktop-md-width: 992px;
$desktop-lg-width: 1200px;
$desktop-xl-width: 1500px;
@mixin small-sp {
    @media (max-width: #{$mobile-width - 1px}) {
        @content;
    }
}

@mixin sp {
    @media (max-width: #{$tablet-width - 1px}) {
        @content;
    }
}

@mixin tablet {
    @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-md-width - 1px}) {
        @content;
    }
}

@mixin desktop {
    @media (min-width: #{$desktop-md-width}) and (max-width: #{$desktop-lg-width - 1px}) {
        @content;
    }
}

@mixin desktop-extra {
    @media (min-width: #{$desktop-lg-width}) {
        @content;
    }
}

@mixin desktop-4k {
    @media (min-width: #{$desktop-xl-width}) {
        @content;
    }
}