diff --git a/src/_core-elements.scss b/src/_core-elements.scss
index 8c7923b..1dcd0cf 100644
--- a/src/_core-elements.scss
+++ b/src/_core-elements.scss
@@ -2,155 +2,133 @@
 @use './variables' as *;
 @use './ui' as *;
 
+/* Initial Reset */
+.z-container * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 .z-container {
   display: grid;
   grid-template-columns: minmax(var(--radius), 1fr);
   grid-template-rows: minmax(var(--radius), 1fr);
-  border: 1px dashed var(--dark);
   place-items: center;
+}
+
+.z-container {
+  border: 1px dashed var(--dark);
   padding: 30px;
 }
 
 .item {
+  --size: var(--m); // default
   --rotation-angle: calc(
     var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)
   );
   --rotate: calc(var(--rotation-angle) * 1deg);
+  --rotate-invert: calc(var(--rotation-angle) * -1deg);
   display: grid;
-  background-color: var(--light);
-  border: 1px solid var(--dark);
+  border: 1px solid;
   grid-area: 1/1/1/1;
   place-content: center;
-  //z-index: 1;
-  width: var(--m);
-  height: var(--m);
+  width: var(--size);
+  height: var(--size);
   border-radius: 50%;
-}
-
-.item {
-  --rotate-invert: calc(var(--rotation-angle) * -1deg);
   transform: rotate(var(--rotate)) translate(var(--x), 0)
     rotate(var(--rotate-invert));
 }
+.item {
+  background-color: var(--light);
+  border-color: var(--dark);
+}
+
 .item.stationary {
   transform: rotate(var(--rotate)) translate(var(--x), 0);
 }
+
+.core {
+  width: 0px;
+  height: 0px;
+  display: grid;
+  border-radius: 50%;
+  grid-area: 1/1/1/1;
+  z-index: $max-rings;
+}
+
+.core {
+  border: 1px solid rgb(255, 5, 5);
+}
+
 .core > .item {
   transform: rotate(var(--rotate));
 }
 
+div[class^='ring-'] {
+  display: grid;
+  border-radius: 50%;
+  border: 0.1px solid var(--dark);
+  grid-area: 1/1/1/1;
+  place-items: center;
+  box-sizing: content-box;
+  width: var(--diam);
+  height: var(--diam);
+  z-index: var(--z-index);
+}
+
+div[class^='ring-'] {
+  border: 0.1px solid var(--dark);
+}
+
 .arc {
   --half: calc(var(--length) / 2);
-  --quarter: calc(var(--half) / 2);
-  // ademas del offset el angulo debe dividirse por 2, distinto de item
-  --semi: calc(var(--angle) / 2 * 1deg);
+  --quarter: calc(var(--half) / 2); 
+  --semi: calc(var(--angle) / 2 * 1deg); // ademas del offset el angulo debe dividirse por 2, distinto de item
   --arc-gap: 1px;
   --length-percent: calc(
     var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi))
   );
-  --color: var(--accent2);
-  --tickness: 49px;
+  --width: 49px;
   --rotate: calc(
-    (
-        var(--angle) * var(--item-number) + var(--offset-angle) -
-          (var(--angle) / 2)
-      ) * 1deg
+    (var(--angle) * var(--item-number) + var(--offset-angle) - (var(--angle) / 2)) * 1deg
   );
   display: grid;
   grid-area: 1/1/1/1;
   height: var(--length);
   width: var(--half);
-  border: var(--tickness) solid var(--color);
+  border: var(--width) solid;
   border-left: none;
-  background-color: transparent;
   border-radius: 0% 100% 100% 0% / 100% 51% 51% 0%;
   box-sizing: border-box;
   clip-path: polygon(
-    0 50%,
-    /* left center pivot*/ 100% calc(100% - var(--length-percent)),
-    /* right to bottom arc increase*/ 100% 100%,
-    /* right top corner*/ 100% 0,
-    /* right bottom corner*/ 100% var(--length-percent)
-  ); /* right to top ar decrease*/
+    0 50% /* left center pivot*/,  
+    100% calc(100% - var(--length-percent)) /* right to bottom arc increase*/,  
+    100% 100% /* right top corner*/,
+    100% 0  /* right bottom corner*/,
+   100% var(--length-percent) /* right to top ar decrease*/
+  ); 
   transform: rotate(var(--rotate)) translate(var(--quarter), 0);
 }
+
+.arc {
+  border-color: var(--accent2);
+  background-color: transparent;
+}
 .arc:hover {
   border-color: var(--accent3);
 }
-.content {
+
+.item > .content {
   padding: 5px;
   width: inherit;
   height: inherit;
   display: grid;
   border-radius: inherit;
-  background-color: rgba(0, 170, 248, 0.815);
   grid-area: 1/1/1/1;
   @include alignment;
   overflow: hidden;
   z-index: 10;
 }
-
-.core {
-  width: 0px;
-  height: 0px;
-  display: grid;
-  border-radius: 50%;
-  border: 1px solid rgb(255, 5, 5);
-  grid-area: 1/1/1/1;
-  //place-items: center;
-  z-index: $max-rings;
-}
-
-div[class^='ring-'] {
-  display: grid;
-  border-radius: 50%;
-  border: 0.1px solid var(--dark);
-  grid-area: 1/1/1/1;
-  place-items: center;
-  box-sizing: content-box;
-  width: var(--diam);
-  height: var(--diam);
-  z-index: var(--z-index);
-}
-/* hack doesnt work on ffox 
-div[class^="ring-"]:has(.item) {
-    place-items: center;
-}
-*/
-
-@each $size, $var in $sizes {
-  .item.#{$size} {
-    width: $var;
-    height: $var;
-  }
-}
-
-@for $i from $min-rings through $max-rings {
-  .z-container > .ring-#{$i} {
-    --diam: calc(var(--radius-#{$i}) * 2);
-    --z-index: $max-rings - $i;
-  }
-}
-
-@for $i from $min-items through $max-items {
-  .item:nth-child(#{$i}),
-  .arc:nth-child(#{$i}) {
-    --item-number: #{$i};
-  }
-}
-
-@each $sector, $angle in $sectors {
-  .#{$sector} {
-    --offset-angle: #{$angle};
-  }
-}
-
-@each $arc, $value in $arcs {
-  .#{$arc} {
-    --arc: #{$value};
-  }
-}
-
-.ccw {
-  --direction: -1;
+.item > .content {
+  background-color: var(--light);
 }
diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
index 7ac46a8..1a4938c 100644
--- a/src/_radial-grid.scss
+++ b/src/_radial-grid.scss
@@ -2,79 +2,21 @@
 @use './variables' as *;
 @use './ui' as *;
 
-/* Initial Reset */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Main elements */
-.z-container {
-  /* Layout vars */
-  --arc: 360;
-  --offset-angle: 0;
-  --direction: 1;
-  --angle: 1;
-  --radius: 50px;
-  --item-number: 1;
-  --radius-padding: 8px;
-
-  @for $i from $min-rings through $max-rings {
-    --radius-#{$i}: var(--radius) * #{$i};
-  }
-
-  /* Shape sizes */
-  --xxs: 8px;
-  --xs: 24px;
-  --s: 44px;
-  --m: 68px;
-  --l: 110px;
-  --xl: 180px;
-  --xxl: 288px;
-
-  /* Color */
-  --transparent: transparent;
-  --white: white;
-  --black: black;
-
-  /* width connector */
-  --connector-width: 40px;
-  --label-width: 50px;
-
-  /* svg */
-  --val: 0;
-  --stroke: 10;
-  --π: 3.14159265359;
-}
 
 @for $i from $min-items through $max-items {
-  @each $arc, $value in $arcs {
-    .items-#{$i}.#{$arc} > .item {
-      --angle: calc((var(--arc) / #{$i - 1}) * var(--direction));
-    }
-  }
-}
-@for $i from $min-items through $max-items {
-  .items-#{$i} > .item {
+  .items-#{$i} > .item, .items-#{$i} > .arc {
     --angle: calc((var(--arc) / #{$i}) * var(--direction));
   }
 }
-
 @for $i from $min-items through $max-items {
-  @each $arc, $value in $arcs {
-    .items-#{$i}.#{$arc} > .arc {
-      // No hay que restar un angulo debido a la forma del arco
-      --angle: calc((var(--arc) / #{$i}) * var(--direction));
+ 
+    .items-#{$i}[classˆ=arc-] > .item {
+      --angle: calc((var(--arc) / #{$i - 1}) * var(--direction));
     }
-  }
-}
-@for $i from $min-items through $max-items {
-  .items-#{$i} > .arc {
-    --angle: calc((var(--arc) / #{$i}) * var(--direction));
-  }
+ 
 }
 
+
 @for $i from $min-rings through $max-rings {
   $resta: 1;
   @if $i == 1 {
@@ -117,7 +59,7 @@
   @each $size, $var in $sizes {
     .item.#{$size} > .ring-#{$i} {
       --diam: calc(#{$var} * #{$i});
-      --z-index: $max-rings - $i;
+      --z-index: #{$max-rings - $i};
     }
     .item.#{$size} > .ring-#{$i} > .item {
       --x: calc((#{$var} / 2 * #{$i}));
@@ -150,3 +92,39 @@
     }
   }
 }
+
+@each $size, $var in $sizes {
+  .item.#{$size} {
+    --size: #{$var};
+  }
+}
+
+@for $i from $min-rings through $max-rings {
+  .z-container > .ring-#{$i} {
+    --diam: calc(var(--radius-#{$i}) * 2);
+    --z-index: #{$max-rings - $i};
+  }
+}
+
+@for $i from $min-items through $max-items {
+  .item:nth-child(#{$i}),
+  .arc:nth-child(#{$i}) {
+    --item-number: #{$i};
+  }
+}
+
+@each $sector, $angle in $sectors {
+  .#{$sector} {
+    --offset-angle: #{$angle};
+  }
+}
+
+@each $arc, $value in $arcs {
+  .#{$arc} {
+    --arc: #{$value};
+  }
+}
+
+.ccw {
+  --direction: -1;
+}
diff --git a/src/_shapes.scss b/src/_shapes.scss
index 932f347..9b4a14e 100644
--- a/src/_shapes.scss
+++ b/src/_shapes.scss
@@ -12,27 +12,27 @@
   border-top: 1px dashed var(--dark);
 }
 
-.item.circle {
-  border-radius: 50%;
+/* 
+* generic element
+*/
+.circle {
+  border-radius: 50% !important;
 }
 
-.item.box {
-  border-radius: 0%;
+.box {
+  border-radius: 0% !important;
 }
 
-.item.rounded {
-  border-radius: 25%;
+.rounded {
+  border-radius: 25% !important;
 }
 
-.item.bubble {
-  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
+.bubble {
+  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
 }
 
-.item.transparent {
-  border: none;
-  background-color: var(--transparent);
+.transparent {
+  border: none !important;
+  background-color: var(--transparent) !important;
 }
 
-div[class^='ring-'].transparent {
-  border: none;
-}
diff --git a/src/_ui.scss b/src/_ui.scss
index 524b708..ba61a2c 100644
--- a/src/_ui.scss
+++ b/src/_ui.scss
@@ -6,8 +6,40 @@
 //background-color: map.get($theme-colors, "warning");
 
 .z-container {
+    /* Layout vars */
+    --arc: 360;
+    --offset-angle: 0;
+    --direction: 1;
+    --angle: 1;
+    --radius: 50px;
+    --item-number: 1;
+    --radius-padding: 8px;
+    @for $i from $min-rings through $max-rings {
+      --radius-#{$i}: var(--radius) * #{$i};
+    }
+  
+    /* Shape sizes */
+    --xxs: 8px;
+    --xs: 24px;
+    --s: 44px;
+    --m: 68px;
+    --l: 110px;
+    --xl: 180px;
+    --xxl: 288px;
+  
+    /* width connector */
+    --connector-width: 40px;
+    --label-width: 50px;
+  
+    /* svg */
+    --val: 0;
+    --stroke: 10;
+    --π: 3.14159265359;
+
   /* Color */
   --transparent: transparent;
+  --white: white;
+  --black: black;
   --light: #c7e9fe;
   --dark: #000300;
   --primary: #e23a48;
diff --git a/src/index.scss b/src/index.scss
index d70fc2e..e0c7f4e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,11 +1,5 @@
-/* Core elements */
 @use './core-elements';
-/* Radial grid */
 @use './radial-grid';
-/* Shapes */
 @use './shapes';
-/* Components */
-/* label */
 @use './components/label';
-/* progress */
 @use './components/progress';