flat links

src/files/css/main.css

@@ -10115,6 +10115,28 @@ footer .copyright .logo {
 .whiteblack:hover a {
   text-decoration: underline; }
 
+.flat-links--mobile {
+  display: none; }
+  @media (max-width: 768px) {
+    .flat-links--mobile {
+      display: block; } }
+  .flat-links--mobile .flat-links__container {
+    flex-direction: column; }
+  .flat-links--mobile .flat-links__item {
+    width: 100%; }
+.flat-links--news {
+  display: none; }
+  @media (max-width: 768px) {
+    .flat-links--news {
+      display: block; } }
+  .flat-links--news .flat-links__container {
+    flex-direction: column; }
+  .flat-links--news .flat-links__item {
+    width: 100%; }
+.flat-links--vertical .flat-links__container {
+  flex-direction: column; }
+.flat-links--vertical .flat-links__item {
+  width: 100%; }
 .flat-links__container {
   padding-left: 15px;
   display: flex;
@@ -10124,20 +10146,22 @@ footer .copyright .logo {
 .flat-links__item {
   padding: 5px;
   height: 90px;
-  width: 47%;
+  width: 49%;
   margin-bottom: 10px;
   background: #d7d7d7;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  vertical-align: middle; }
+  justify-content: flex-start;
+  vertical-align: middle;
+  align-items: center; }
   .flat-links__item:hover {
     text-decoration: none;
     background: #004d7b; }
   .flat-links__item-icon {
     display: block; }
   .flat-links__item-description {
-    display: flex;
+    display: block;
+    margin-left: 10px;
     color: #fff;
     font-weight: 700;
     font-size: 15px; }

src/files/scss/_flat-links.scss

@@ -1,5 +1,48 @@
+$flatLinksClass: '.flat-links';
 .flat-links {
 
+    &--mobile {
+        display: none;
+
+        @media (max-width: 768px) {
+            display: block;
+        }
+
+        #{$flatLinksClass}__container {
+            flex-direction: column;
+        }
+
+        #{$flatLinksClass}__item {
+            width: 100%;
+        }
+    }
+
+    &--news {
+        display: none;
+
+        @media (max-width: 768px) {
+            display: block;
+        }
+
+        #{$flatLinksClass}__container {
+            flex-direction: column;
+        }
+
+        #{$flatLinksClass}__item {
+            width: 100%;
+        }
+    }
+
+    &--vertical {
+        #{$flatLinksClass}__container {
+            flex-direction: column;
+        }
+
+        #{$flatLinksClass}__item {
+            width: 100%;
+        }
+    }
+
     &__container {
         padding-left: 15px;
         display: flex;
@@ -11,13 +54,14 @@
     &__item {
         padding: 5px;
         height: 90px;
-        width: 47%;
+        width: 49%;
         margin-bottom: 10px;
         background: #d7d7d7;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
+        justify-content: flex-start;
         vertical-align: middle;
+        align-items: center;
 
         &:hover {
             text-decoration: none;
@@ -29,7 +73,8 @@
         }
 
         &-description {
-            display: flex;
+            display: block;
+            margin-left: 10px;
             color: #fff;
             font-weight: 700;
             font-size: 15px;