trying @container query

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; 
+    } 
+}