docs: fix inconsistent divider in rule categories box (#19249)

* docs: fix inconsistent divider in rule categories

* fix styling errors

---------

Co-authored-by: Nitin Kumar <[email protected]>

Author: Tanujkanti4441

docs/src/assets/scss/components/rules.scss

@@ -17,20 +17,19 @@
             &:not(:first-child)::after {
                 content: "";
                 display: block;
-                padding: 1px;
                 border-left: 1px solid var(--divider-color);
                 left: 0;
             }
         }
 
-        @media screen and (min-width: 768px) and (max-width: 1023px), screen and (min-width: 1440px) {
+        @media screen and (min-width: 768px) and (max-width: 799px), screen and (min-width: 854px) and (max-width: 1023px), screen and (min-width: 1256px) {
             &:not(:first-child)::after {
                 height: 70%;
                 position: absolute;
             }
         }
 
-        @media screen and (min-width: 1024px) and (max-width: 1439px) {
+        @media screen and (min-width: 800px) and (max-width: 853px), screen and (min-width: 1024px) and (max-width: 1255px) {
             &:nth-child(2)::after {
                 height: 70%;
                 position: absolute;