feat(elements): Revamp consent components with improved theming, layout, and accessibility

ts_web/elements/consentsoftware-mainselection.ts

@@ -21,17 +21,41 @@ export class ConsentsoftwareMainSelection extends LitElement {
     .maincontainer {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
+      padding: 8px 0;
+    }
+
+    @media (max-width: 560px) {
+      .maincontainer {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4px;
+      }
     }
 
     .itemBox {
-      padding: 16px;
+      padding: 12px 8px;
       text-align: center;
-      border-right: 1px solid;
-      border-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%) 1;
+      border-right: 1px solid var(--border, hsl(0 0% 18%));
     }
+
     .itemBox:last-child {
       border-right: none;
     }
+
+    @media (max-width: 560px) {
+      .itemBox {
+        padding: 10px 8px;
+        border-right: none;
+        border-bottom: 1px solid var(--border, hsl(0 0% 18%));
+      }
+
+      .itemBox:nth-child(odd) {
+        border-right: 1px solid var(--border, hsl(0 0% 18%));
+      }
+
+      .itemBox:nth-last-child(-n+2) {
+        border-bottom: none;
+      }
+    }
   `;
 
   constructor() {