// Clearfix CSS
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}


// Absolute Position Center
@mixin absolute-center{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// Background-cover Image
@mixin bg-cover{
    background : {
        color: $color-primary;
        size: cover;
        position: center;
        repeat: no-repeat;
    }
}


@mixin object-fit-img{
    object-fit: cover;
    width: 100%;
}

// Slider Navigation Vertical Center
@mixin arrow__nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

// Slider Navigation Vertical Center
@mixin border-around{
   border: 1px solid $color-gray-1;
   border-radius:3px;
}

@mixin breakpoint($point) {

    // 576 to Upper
    @if $point == xsmall {
        @media (min-width: 360px) { 
            @content ; 
        }
    }

    // 576 to Upper
    @if $point == small {
        @media (min-width: 576px) { 
            @content ; 
        }
    }

    // 768 to Upper
    @if $point == medium {
        @media (min-width: 768px) { 
            @content ; 
        }
    }

    // 998 to Upper
    @if $point == large {
        @media (min-width: 992px) { 
            @content ; 
        }
    }

    // 1200 to Upper
    @if $point == xlarge {
        @media (min-width: 1200px) { 
            @content ; 
        }
    }

    // 1367 to Upper
    @if $point == xxlarge {
        @media (min-width: 1400px) { 
            @content ; 
        }
    }

}

