/* Breakpoints */
@custom-media --x-small-up (width >= 414px);
@custom-media --x-small-down (width < 414px);
@custom-media --x-small-to-small (414px <= width < 480px);

@custom-media --small-up (width >= 480px);
@custom-media --small-down (width < 480px);
@custom-media --small-to-medium (480px <= width < 768px);

@custom-media --medium-up (width >= 768px);
@custom-media --medium-down (width < 768px);
@custom-media --medium-to-large (768px <= width < 1024px);

@custom-media --large-up (width >= 1024px);
@custom-media --large-down (width < 1024px);
@custom-media --large-to-x-large (1024px <= width < 1224px);

@custom-media --x-large-up (width >= 1224px);
@custom-media --x-large-down (width < 1224px);