// _mixins.scss
@mixin respond-to($breakpoint) {
    @if $breakpoint == 'sm' {
        @media (min-width: 576px) { @content; }
    }
    @else if $breakpoint == 'md' {
        @media (min-width: 768px) { @content; }
    }
    @else if $breakpoint == 'lg' {
        @media (min-width: 992px) { @content; }
    }
    @else if $breakpoint == 'xl' {
        @media (min-width: 1200px) { @content; }
    }
}

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin transition($properties...) {
    transition-property: $properties;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}