@use "vars" as *;

@mixin container {
    width: 100%;
    max-width: $container;
    margin: 0 auto;
}

@mixin card {
    background: rgba(18, 18, 18, 0.4);
    border: 1px solid $color-border;
    border-radius: $radius-md;
    box-shadow: $shadow-card;
}

@mixin respond($breakpoint) {
    @media only screen and (max-width: $breakpoint) {
        @content;
    }
}