for cromium

html/css/inbox.css

@@ -104,11 +104,11 @@ body {
 a {
     color: var(--color-link); 
     text-decoration: none;
-    &:hover,
-    &:focus,
-    &:active {
-        color: var(--color-link-hover);        
 }
+a:hover,
+a:focus,
+a:active {
+    color: var(--color-link-hover);        
 }
 
 button, a.btn {
@@ -123,25 +123,25 @@ button, a.btn {
     border: 1px solid transparent;
     border-radius: 4px;
     background: var(--color-link);   
-    &:hover,
+}
-    &:focus,
+button:hover, a.btn:hover,
-    &:active {
+button:focus, a.btn:focus,
+button:active, a.btn:active {
     background: var(--color-link-hover);
     cursor: pointer;     
 }
-}
 .btn.btn-secondary {
     color: var(--color-link);
     border-color: var(--color-link);
     background-color: transparent;
-    &:hover,
+}
-    &:focus,
+.btn.btn-secondary:hover,
-    &:active {
+.btn.btn-secondary:focus,
+.btn.btn-secondary:active {
     color: var(--color-link-hover);
     border-color: var(--color-link-hover);
     background: transparent;
 }
-}
 
 .header {
     display: flex;
@@ -152,18 +152,17 @@ button, a.btn {
     padding: 0 var(--w-screen);
     border: 0;
     background-color: var(--color-bg-main);
-
+}
-    .header-logo {
+.header .header-logo {
     width: 62px;
     height: 40px;
     background: url(../img/svg/mil-logo.svg) no-repeat 0 50%;
 }
-    .header-title {
+.header .header-title {
     color: var(--white);
     font-size: var(--size-text-secondary);
     margin-left: var(--indent-mini);
 }
-}
 :is(.ul, .fl) .header {
     background-color: var(--color-text-primary);
     z-index: 1;
@@ -193,65 +192,50 @@ button, a.btn {
     padding: 0 var(--w-screen);
     background-color: var(--bg-light);
     overflow: auto;
-
+}
-    .block-group {
+.container-inside .block-group {
     display: flex;
     flex-direction: row;
     margin: auto;
 }
-    .block {
+.container-inside .block {
     font-family: 'Inter';
     min-width: 355px;
     padding: 40px;
     border-radius: 12px;
     background-color: var(--white);
     box-shadow: var(--bg-shadow);
-
+}
-        & > div {
+.container-inside .block > div {
     max-width: 350px;
 }
-        & + .block {
+.container-inside .block + .block {
     margin-left: 40px;
 }
-        .block-img {
+.container-inside .block .block-img {
     width: 100px;
     height: 100px;
 }
-        &.block-ul .block-img {
+.container-inside .block.block-ul .block-img {
     background-image: url(../img/svg/ul.svg);
 }
-        &.block-fl .block-img {
+.container-inside .block.block-fl .block-img {
     background-image: url(../img/svg/fl.svg);
 }
-        .block-title {
+.container-inside .block .block-title {
     font-family: 'GolosB';
     font-size: var(--size-text-subtitle);
     margin-top: var(--indent-mini);
 } 
-        .block-description {
+.container-inside .block .block-description {
     font-family: 'Golos';
     font-size: var(--size-text-primary);
     margin-top: var(--indent-mini);
 }
-        .btn {
+.container-inside .block .btn {
     width: auto;
     margin-top: var(--indent-medium);
 }
-    }
-}
-:is(.ul, .fl) .container-inside {
-    padding: 0;
-    background-color: var(--white);
-
-    .btn-group {
-        display: flex;
-        flex-direction: row;
-
-        .btn + .btn {
-            margin-left: var(--indent-mini);
-        }
-    }
-}
 
 /*@media ((max-width: 780px) or ((orientation: landscape) and (max-device-width : 1024px))) {*/
 @media (max-width: 1024px) {
@@ -271,16 +255,15 @@ button, a.btn {
     .container-inside .block-group {
         flex-direction: column;
         margin: 0;
-
+    }
-        .block {
+    .container-inside .block-group .block {
         min-width: auto;
         margin: var(--indent-huge) 0 0;
-            & > div {
+    }
+    .container-inside .block-group .block > div {
         max-width: inherit !important;
     }
 }
-    }
-}
 
 @media (max-width: 480px) {
     body {