Internal: Expose custom media queries

[rami-elementor]

Add custom media queries for responsive design.

This PR only adds @custom-media to the CSS. At this point they are not used inside @media as it's not fully browser-compatible. But the PR adds them, to expose the breakpoints for external users.

Result:

@custom-media --hello-screen-xs-and-below (width < 576px);
@custom-media --hello-screen-xs-and-above (width >= 576px);
@custom-media --hello-screen-xs-only (0 <= width < 576px);

@custom-media --hello-screen-sm-and-below (width < 768px);
@custom-media --hello-screen-sm-and-above (width >= 768px);
@custom-media --hello-screen-sm-only (576px <= width < 768px);

@custom-media --hello-screen-md-and-below (width < 992px);
@custom-media --hello-screen-md-and-above (width >= 992px);
@custom-media --hello-screen-md-only (768px <= width < 992px);

@custom-media --hello-screen-xl-and-below (width < 1200px);
@custom-media --hello-screen-xl-and-above (width >= 1200px);
@custom-media --hello-screen-xl-only (992px <= width < 1200px);

The naming convention and best practices are based on Open Props
https://github.com/argyleink/open-props/blob/main/src/props.media.css

✨ PR Description

1. Problem & Context

Exposing custom CSS media queries as reusable variables to decouple breakpoint definitions from individual media query usages, reducing maintenance burden.

2. What Changed (Where)

• dev/scss/theme/_layout.scss: Added 8 custom media query definitions for xs/sm/md/xl breakpoints (min/max variants).

3. How It Works

Custom media queries map named aliases (--hello-screen-xs-min, etc.) to computed breakpoint expressions. Consumers can then use @media (--hello-screen-xs-min) instead of repeating the calculation, centralizing breakpoint logic.

4. Risks

None identified. Additive change with no breaking modifications to existing media queries or container logic.

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Description using Guidelines Learn how}