From 19e0edcbda27fc4b45f739eca10088d384c2b7f8 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <92088692+rami-elementor@users.noreply.github.com>
Date: Sat, 30 May 2026 06:33:33 -0700
Subject: [PATCH 1/3] Internal: Expose custom media queries

Add custom media queries for responsive design.
---
 dev/scss/theme/_layout.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/dev/scss/theme/_layout.scss b/dev/scss/theme/_layout.scss
index e1493476..4964c972 100644
--- a/dev/scss/theme/_layout.scss
+++ b/dev/scss/theme/_layout.scss
@@ -12,6 +12,11 @@ $containers: '.site-header .header-inner,.site-header:not(.dynamic-header), .sit
 	width: 100%;
 }
 
+@custom-media --hello-screen-xs (min-width: #{variables.$screen-xs});
+@custom-media --hello-screen-sm (min-width: #{variables.$screen-sm});
+@custom-media --hello-screen-md (min-width: #{variables.$screen-md});
+@custom-media --hello-screen-xl (min-width: #{variables.$screen-xl});
+
 @media (max-width: variables.$screen-xs - variables.$screen-diff){
 
 	#{$containers} {

From 7ba7a09b4aef6a9127bf4bad49f275535ccdd0ae Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <92088692+rami-elementor@users.noreply.github.com>
Date: Sun, 31 May 2026 06:00:00 +0000
Subject: [PATCH 2/3] Internal: Expose custom media queries

---
 dev/scss/theme/_layout.scss | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/dev/scss/theme/_layout.scss b/dev/scss/theme/_layout.scss
index 4964c972..0043e65e 100644
--- a/dev/scss/theme/_layout.scss
+++ b/dev/scss/theme/_layout.scss
@@ -12,10 +12,14 @@ $containers: '.site-header .header-inner,.site-header:not(.dynamic-header), .sit
 	width: 100%;
 }
 
-@custom-media --hello-screen-xs (min-width: #{variables.$screen-xs});
-@custom-media --hello-screen-sm (min-width: #{variables.$screen-sm});
-@custom-media --hello-screen-md (min-width: #{variables.$screen-md});
-@custom-media --hello-screen-xl (min-width: #{variables.$screen-xl});
+@custom-media --hello-screen-xs-max (max-width: #{variables.$screen-xs - variables.$screen-diff});
+@custom-media --hello-screen-xs-min (min-width: #{variables.$screen-xs});
+@custom-media --hello-screen-sm-max (max-width: #{variables.$screen-sm - variables.$screen-diff});
+@custom-media --hello-screen-sm-min (min-width: #{variables.$screen-sm});
+@custom-media --hello-screen-md-max (max-width: #{variables.$screen-md - variables.$screen-diff});
+@custom-media --hello-screen-md-min (min-width: #{variables.$screen-md});
+@custom-media --hello-screen-xl-max (max-width: #{variables.$screen-xl - variables.$screen-diff});
+@custom-media --hello-screen-xl-min (min-width: #{variables.$screen-xl});
 
 @media (max-width: variables.$screen-xs - variables.$screen-diff){
 

From fc931133cf0199425a54166d83e3e38d1a3ca333 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <92088692+rami-elementor@users.noreply.github.com>
Date: Mon, 1 Jun 2026 06:22:28 +0000
Subject: [PATCH 3/3] Use media query range syntax

---
 dev/scss/theme/_layout.scss | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/dev/scss/theme/_layout.scss b/dev/scss/theme/_layout.scss
index 0043e65e..e510c0f9 100644
--- a/dev/scss/theme/_layout.scss
+++ b/dev/scss/theme/_layout.scss
@@ -12,14 +12,21 @@ $containers: '.site-header .header-inner,.site-header:not(.dynamic-header), .sit
 	width: 100%;
 }
 
-@custom-media --hello-screen-xs-max (max-width: #{variables.$screen-xs - variables.$screen-diff});
-@custom-media --hello-screen-xs-min (min-width: #{variables.$screen-xs});
-@custom-media --hello-screen-sm-max (max-width: #{variables.$screen-sm - variables.$screen-diff});
-@custom-media --hello-screen-sm-min (min-width: #{variables.$screen-sm});
-@custom-media --hello-screen-md-max (max-width: #{variables.$screen-md - variables.$screen-diff});
-@custom-media --hello-screen-md-min (min-width: #{variables.$screen-md});
-@custom-media --hello-screen-xl-max (max-width: #{variables.$screen-xl - variables.$screen-diff});
-@custom-media --hello-screen-xl-min (min-width: #{variables.$screen-xl});
+@custom-media --hello-screen-xs-and-below (width < #{variables.$screen-xs});
+@custom-media --hello-screen-xs-and-above (width >= #{variables.$screen-xs});
+@custom-media --hello-screen-xs-only (0 <= width < #{variables.$screen-xs});
+
+@custom-media --hello-screen-sm-and-below (width < #{variables.$screen-sm});
+@custom-media --hello-screen-sm-and-above (width >= #{variables.$screen-sm});
+@custom-media --hello-screen-sm-only (#{variables.$screen-xs} <= width < #{variables.$screen-sm});
+
+@custom-media --hello-screen-md-and-below (width < #{variables.$screen-md});
+@custom-media --hello-screen-md-and-above (width >= #{variables.$screen-md});
+@custom-media --hello-screen-md-only (#{variables.$screen-sm} <= width < #{variables.$screen-md});
+
+@custom-media --hello-screen-xl-and-below (width < #{variables.$screen-xl});
+@custom-media --hello-screen-xl-and-above (width >= #{variables.$screen-xl});
+@custom-media --hello-screen-xl-only (#{variables.$screen-md} <= width < #{variables.$screen-xl});
 
 @media (max-width: variables.$screen-xs - variables.$screen-diff){