From f47068a6b3dd5c148aa4f5897a3a55c7f2e7f269 Mon Sep 17 00:00:00 2001
From: Martin Muda <mud@mrecic.gov.ar>
Date: Thu, 19 Oct 2023 16:07:55 -0300
Subject: [PATCH] trying @container query

---
 src/layouts/_media-queries.scss | 40 ++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/src/layouts/_media-queries.scss b/src/layouts/_media-queries.scss
index 324be54..3fe60e6 100644
--- a/src/layouts/_media-queries.scss
+++ b/src/layouts/_media-queries.scss
@@ -17,7 +17,7 @@
 @media (min-width: 768px) and (max-width: 1024px){ 
     .o-container { 
         --o-radius: 70px; 
-    } 
+    }
 } 
 
 /* Media Query for Laptops and Desktops */ 
@@ -33,3 +33,41 @@
         --o-radius: 90px; 
     } 
 } 
+
+/* container media query */
+
+.resize {
+    container-type: inline-size;
+  }
+  
+
+/* Media Query for Mobile Devices */ 
+@container (max-width: 480px) { 
+    .o-container { 
+        --o-radius: 50px; 
+    } 
+} 
+
+/* Media Query for low resolution Tablets, Ipads */ 
+@container (min-width: 481px) and (max-width: 767px) { 
+    .o-container { 
+        --o-radius: 60px; 
+    } 
+} 
+
+/* Media Query for Tablets Ipads portrait mode */ 
+
+
+/* Media Query for Laptops and Desktops */ 
+@container (min-width: 1025px) and (max-width: 1280px){ 
+    .o-container { 
+        --o-radius: 80px; 
+    } 
+} 
+
+/* Media Query for Large screens */ 
+@container (min-width: 1281px) { 
+    .o-container { 
+        --o-radius: 90px; 
+    } 
+}