Unify responsive behaviour by using mixin below()

[pstackebrandt]

You have two approaches to responsive design:
Media query mixins in variables.scss
Manual media queries in some components
Consider standardizing to use the mixins consistently:

// Instead of
@media (max-width: vars.$breakpoint-m) {
// styles
}

// Use consistently
@include below(medium) {
// styles
}