stylelint-order-fmt

.stylelintrc.json

@@ -1,46 +1,51 @@
 {
+  "defaultSeverity": "warning",
   "extends": ["stylelint-config-standard-scss", "stylelint-config-recommended"],
   "plugins": ["stylelint-order", "stylelint-scss"],
   "rules": {
-    "at-rule-no-unknown": null,
+    "annotation-no-unknown": [
-    "keyframes-name-pattern": null,
-    "declaration-block-no-redundant-longhand-properties": null,
-    "selector-class-pattern": null,
-    "no-descending-specificity": null,
-    "scss/function-no-unknown": null,
-    "scss/no-global-function-names": null,
-    "function-url-quotes": null,
-    "font-family-no-missing-generic-family-keyword": null,
-    "order/order": ["custom-properties", "declarations"],
-    "scss/dollar-variable-pattern": [
-      "^[a-z][a-zA-Z]+$",
-      {
-        "ignore": "global"
-      }
-    ],
-    "selector-pseudo-class-no-unknown": [
       true,
       {
-        "ignorePseudoClasses": ["global", "export"]
+        "ignoreAnnotations": ["default"]
       }
     ],
+    "at-rule-no-unknown": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "function-no-unknown": [
+      true,
+      {
+        "ignoreFunctions": ["divide", "transparentize"]
+      }
+    ],
+    "function-url-quotes": null,
+    "keyframes-name-pattern": null,
+    "no-descending-specificity": null,
+    "order/order": [
+      {
+        "type": "at-rule",
+        "name": "include"
+      },
+      "custom-properties",
+      "declarations",
+      "rules"
+    ],
     "property-no-vendor-prefix": [
       true,
       {
         "ignoreProperties": ["box-decoration-break"]
       }
     ],
-    "annotation-no-unknown": [
-      true,
-      {
-        "ignoreAnnotations": ["default"]
-      }
-    ],
     "scss/at-function-pattern": null,
     "scss/at-mixin-pattern": null,
-    "scss/percent-placeholder-pattern": null,
     "scss/dollar-variable-colon-space-after": "always-single-line",
     "scss/dollar-variable-colon-space-before": "never",
+    "scss/dollar-variable-pattern": [
+      "^[a-z][a-zA-Z]+$",
+      {
+        "ignore": "global"
+      }
+    ],
     "scss/double-slash-comment-empty-line-before": [
       "always",
       {
@@ -49,17 +54,20 @@
       }
     ],
     "scss/double-slash-comment-whitespace-inside": "always",
+    "scss/function-no-unknown": null,
+    "scss/no-duplicate-dollar-variables": null,
+    "scss/no-duplicate-mixins": null,
+    "scss/no-global-function-names": null,
     "scss/operator-no-newline-after": null,
     "scss/operator-no-newline-before": null,
     "scss/operator-no-unspaced": null,
-    "scss/no-duplicate-dollar-variables": null,
+    "scss/percent-placeholder-pattern": null,
-    "scss/no-duplicate-mixins": null,
+    "selector-class-pattern": null,
-    "function-no-unknown": [
+    "selector-pseudo-class-no-unknown": [
       true,
       {
-        "ignoreFunctions": ["divide", "transparentize"]
+        "ignorePseudoClasses": ["global", "export"]
       }
     ]
-  },
+  }
-  "defaultSeverity": "warning"
 }

src/components/Article/Article.module.scss

@@ -27,6 +27,16 @@ img {
 }
 
 .shoutBody {
+  @include media-breakpoint-up(sm) {
+    :global(.width-30) {
+      width: 30%;
+    }
+
+    :global(.width-50) {
+      width: 50%;
+    }
+  }
+
   font-size: 1.6rem;
   line-height: 1.6;
 
@@ -65,6 +75,16 @@ img {
 
   blockquote[data-type='quote'],
   ta-quotation {
+    @include media-breakpoint-up(sm) {
+      &[data-float='left'] {
+        margin-right: 1.5em;
+      }
+
+      &[data-float='right'] {
+        margin-left: 1.5em;
+      }
+    }
+
     border: solid #000;
     border-width: 0 0 0 2px;
     clear: both;
@@ -78,21 +98,11 @@ img {
     &[data-float='right'] {
       @include font-size(2.2rem);
 
-      line-height: 1.4;
-
       @include media-breakpoint-up(sm) {
         clear: none;
       }
-    }
 
-    @include media-breakpoint-up(sm) {
+      line-height: 1.4;
-      &[data-float='left'] {
-        margin-right: 1.5em;
-      }
-
-      &[data-float='right'] {
-        margin-left: 1.5em;
-      }
     }
 
     &::before {
@@ -106,17 +116,17 @@ img {
   ta-border-sub {
     @include font-size(1.4rem);
 
+    @include media-breakpoint-up(md) {
+      margin: 3.2rem -8.3333%;
+      padding: 3.2rem 8.3333%;
+    }
+
     background: #f1f2f3;
     clear: both;
     display: block;
     margin: 3.2rem 0;
     padding: 3.2rem;
 
-    @include media-breakpoint-up(md) {
-      margin: 3.2rem -8.3333%;
-      padding: 3.2rem 8.3333%;
-    }
-
     p:last-child {
       margin-bottom: 0;
     }
@@ -194,16 +204,6 @@ img {
     margin: 0 8.3333% 1.5em 0;
   }
 
-  @include media-breakpoint-up(sm) {
-    :global(.width-30) {
-      width: 30%;
-    }
-
-    :global(.width-50) {
-      width: 50%;
-    }
-  }
-
   :global(.img-align-left.width-50) {
     @include media-breakpoint-up(xl) {
       margin-left: -16.6666%;
@@ -313,20 +313,24 @@ img {
 }
 
 .shoutStats {
+  @include media-breakpoint-down(lg) {
+    flex-wrap: wrap;
+  }
+
   border-top: 4px solid #000;
   display: flex;
   justify-content: flex-start;
   padding: 3rem 0 0;
   position: relative;
-
-  @include media-breakpoint-down(lg) {
-    flex-wrap: wrap;
-  }
 }
 
 .shoutStatsItem {
   @include font-size(1.5rem);
 
+  @include media-breakpoint-up(xl) {
+    margin-right: 3.2rem;
+  }
+
   align-items: center;
   font-weight: 500;
   display: flex;
@@ -334,10 +338,6 @@ img {
   vertical-align: baseline;
   cursor: pointer;
 
-  @include media-breakpoint-up(xl) {
-    margin-right: 3.2rem;
-  }
-
   .icon {
     display: inline-block;
     margin-right: 0.2em;
@@ -379,11 +379,11 @@ img {
 }
 
 .shoutStatsItemBookmarks {
-  margin-left: auto;
-
   @include media-breakpoint-up(lg) {
     margin-left: 0;
   }
+
+  margin-left: auto;
 }
 
 .shoutStatsItemInner {
@@ -408,6 +408,15 @@ img {
 }
 
 .shoutStatsItemAdditionalData {
+  @include media-breakpoint-down(lg) {
+    flex: 1 100%;
+    order: 9;
+
+    .shoutStatsItemAdditionalDataItem {
+      margin-left: 0;
+    }
+  }
+
   color: rgb(0 0 0 / 40%);
   cursor: default;
   font-weight: normal;
@@ -418,24 +427,9 @@ img {
     opacity: 0.4;
     height: 2rem;
   }
-
-  @include media-breakpoint-down(lg) {
-    flex: 1 100%;
-    order: 9;
-
-    .shoutStatsItemAdditionalDataItem {
-      margin-left: 0;
-    }
-  }
 }
 
 .shoutStatsItemViews {
-  color: rgb(0 0 0 / 40%);
-  cursor: default;
-  font-weight: normal;
-  margin-left: auto;
-  white-space: nowrap;
-
   @include media-breakpoint-down(lg) {
     bottom: 0;
     flex: 1 40%;
@@ -449,6 +443,12 @@ img {
       display: none !important;
     }
   }
+
+  color: rgb(0 0 0 / 40%);
+  cursor: default;
+  font-weight: normal;
+  margin-left: auto;
+  white-space: nowrap;
 }
 
 .shoutStatsItemLabel {
@@ -457,11 +457,11 @@ img {
 }
 
 .commentsTextLabel {
-  display: none;
-
   @include media-breakpoint-up(sm) {
     display: block;
   }
+
+  display: none;
 }
 
 .shoutStatsItemCount {
@@ -471,6 +471,12 @@ img {
 }
 
 .shoutStatsItemAdditionalDataItem {
+  @include media-breakpoint-down(sm) {
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
   font-weight: normal;
   display: inline-block;
 
@@ -478,12 +484,6 @@ img {
   margin-right: 0;
   margin-bottom: 0;
   cursor: default;
-
-  @include media-breakpoint-down(sm) {
-    &:first-child {
-      margin-left: 0;
-    }
-  }
 }
 
 .topicsList {

src/components/Article/AudioPlayer/AudioPlayer.module.scss

@@ -3,27 +3,32 @@
 }
 
 .playerHeader {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-
   @include media-breakpoint-down(sm) {
     flex-direction: column;
   }
+
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
 }
 
 .playerTitle {
+  @include media-breakpoint-down(sm) {
+    max-width: 100%;
+  }
+
   max-width: 50%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-
-  @include media-breakpoint-down(sm) {
-    max-width: 100%;
-  }
 }
 
 .playerControls {
+  @include media-breakpoint-down(sm) {
+    margin-top: 20px;
+    margin-left: 0;
+  }
+
   display: flex;
   min-width: 160px;
   align-items: center;
@@ -42,11 +47,6 @@
     }
   }
 
-  @include media-breakpoint-down(sm) {
-    margin-top: 20px;
-    margin-left: 0;
-  }
-
   .playButton {
     display: flex;
     align-items: center;

src/components/Article/Comment/Comment.module.scss

@@ -1,14 +1,14 @@
 .comment {
+  @include media-breakpoint-down(sm) {
+    padding-right: 0;
+  }
+
   margin: 0 0 0.5em;
   padding: 0 1rem;
   transition: background-color 0.3s;
   position: relative;
   list-style: none;
 
-  @include media-breakpoint-down(sm) {
-    padding-right: 0;
-  }
-
   &.isNew {
     border-radius: 6px;
     background: rgb(38 56 217 / 5%);
@@ -193,9 +193,6 @@
 .articleLink {
   @include font-size(1.2rem);
 
-  flex: 0 0 50%;
-  margin-right: 2em;
-
   @include media-breakpoint-down(md) {
     margin: 0.3em 0 0.5em;
   }
@@ -208,20 +205,25 @@
     overflow: hidden;
     white-space: nowrap;
   }
+
+  flex: 0 0 50%;
+  margin-right: 2em;
 }
 
 .articleLinkIcon {
+  @include media-breakpoint-up(md) {
+    margin-left: 1em;
+  }
+
   display: inline-block;
   margin-right: 1em;
   vertical-align: middle;
   width: 1em;
-
-  @include media-breakpoint-up(md) {
-    margin-left: 1em;
-  }
 }
 
 .commentDates {
+  @include font-size(1.2rem);
+
   flex: 1;
   display: flex;
   gap: 1rem;
@@ -231,8 +233,6 @@
   margin: 0 1em 4px 0;
   color: rgb(0 0 0 / 30%);
 
-  @include font-size(1.2rem);
-
   .date {
     .icon {
       line-height: 1;
@@ -246,13 +246,13 @@
 }
 
 .commentDetails {
-  padding: 1rem 0.2rem 0;
-  margin-bottom: 1.2rem;
-
   @include media-breakpoint-up(md) {
     align-items: center;
     display: flex;
   }
+
+  padding: 1rem 0.2rem 0;
+  margin-bottom: 1.2rem;
 }
 
 .compactUserpic {

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -1,4 +1,8 @@
 .AuthorBadge {
+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
   align-items: flex-start;
   display: flex;
   gap: 1rem;
@@ -12,34 +16,30 @@
     }
   }
 
-  @include media-breakpoint-down(md) {
+  .basicInfo {
-    text-align: left;
+    @include media-breakpoint-down(sm) {
+      flex: 0 100%;
     }
 
-  .basicInfo {
     display: flex;
     flex-direction: row;
     align-items: center;
     flex: 0 calc(100% - 5.2rem);
     gap: 1rem;
-
-    @include media-breakpoint-down(sm) {
-      flex: 0 100%;
-    }
   }
 
   .info {
     @include font-size(1.4rem);
 
+    @include media-breakpoint-up(sm) {
+      flex: 1 100%;
+    }
+
     border: none;
     display: flex;
     flex-direction: column;
     line-height: 1.3;
 
-    @include media-breakpoint-up(sm) {
-      flex: 1 100%;
-    }
-
     &:hover {
       background: unset;
     }
@@ -70,12 +70,6 @@
   }
 
   .actions {
-    flex: 0 20%;
-    display: flex;
-    flex-direction: row;
-    margin-left: 5.2rem;
-    gap: 1rem;
-
     @include media-breakpoint-down(sm) {
       margin-left: 0;
     }
@@ -90,6 +84,12 @@
       padding-left: 1rem;
       text-align: right;
     }
+
+    flex: 0 20%;
+    display: flex;
+    flex-direction: row;
+    margin-left: 5.2rem;
+    gap: 1rem;
   }
 
   .actionButton {

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -1,4 +1,16 @@
 .author {
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+  }
+
+  @include media-breakpoint-up(md) {
+    margin-bottom: 2.4rem;
+  }
+
+  @include media-breakpoint-down(lg) {
+    flex-wrap: wrap;
+  }
+
   display: flex;
   align-items: center;
   flex-flow: row nowrap;
@@ -8,14 +20,6 @@
     margin-bottom: 0;
   }
 
-  @include media-breakpoint-down(md) {
-    justify-content: center;
-  }
-
-  @include media-breakpoint-up(md) {
-    margin-bottom: 2.4rem;
-  }
-
   .authorName {
     @include font-size(4rem);
 
@@ -32,15 +36,15 @@
   }
 
   .authorActions {
+    @include media-breakpoint-down(md) {
+      justify-content: center;
+    }
+
     margin: 2rem -0.8rem 0 0;
     padding-left: 0;
     display: flex;
     flex-direction: row;
     gap: 1rem;
-
-    @include media-breakpoint-down(md) {
-      justify-content: center;
-    }
   }
 
   .authorActionsLabel {
@@ -50,27 +54,24 @@
   }
 
   .authorActionsLabelMobile {
-    display: none;
-
     @include media-breakpoint-down(sm) {
       display: block;
     }
+
+    display: none;
   }
 
   .authorDetails {
-    display: block;
-    margin-bottom: 0;
-
     @include media-breakpoint-down(md) {
       flex: 1 100%;
       text-align: center;
     }
+
+    display: block;
+    margin-bottom: 0;
   }
 
   .listWrapper & {
-    align-items: flex-start;
-    margin-bottom: 2rem;
-
     @include media-breakpoint-down(sm) {
       margin-bottom: 3rem;
     }
@@ -79,6 +80,9 @@
       margin-bottom: 3rem;
     }
 
+    align-items: flex-start;
+    margin-bottom: 2rem;
+
     .circlewrap {
       margin-top: 1rem;
     }
@@ -88,10 +92,6 @@
     }
   }
 
-  @include media-breakpoint-down(lg) {
-    flex-wrap: wrap;
-  }
-
   .buttonWriteMessage {
     border-radius: 0.8rem;
     padding-bottom: 0.6rem;
@@ -100,8 +100,6 @@
 }
 
 .authorDetails {
-  flex: 0 0 auto;
-
   @include media-breakpoint-up(sm) {
     align-items: center;
     display: flex;
@@ -118,12 +116,11 @@
       flex-wrap: nowrap;
     }
   }
+
+  flex: 0 0 auto;
 }
 
 .authorDetailsWrapper {
-  flex: 1 0;
-  position: relative;
-
   @include media-breakpoint-up(sm) {
     flex: 1;
   }
@@ -139,6 +136,9 @@
   @include media-breakpoint-up(md) {
     padding-right: 1.2rem;
   }
+
+  flex: 1 0;
+  position: relative;
 }
 
 .authorName {
@@ -160,6 +160,15 @@
 }
 
 .authorSubscribeSocial {
+  @include media-breakpoint-down(sm) {
+    flex: 1 100%;
+    justify-content: center;
+  }
+
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+  }
+
   align-items: center;
   display: flex;
   margin: 0.5rem 0 2rem -0.4rem;
@@ -415,15 +424,6 @@
     }
   }
 
-  @include media-breakpoint-down(sm) {
-    flex: 1 100%;
-    justify-content: center;
-  }
-
-  @include media-breakpoint-down(md) {
-    justify-content: center;
-  }
-
   a:link {
     border: none;
   }
@@ -434,14 +434,14 @@
 }
 
 .subscribersContainer {
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+  }
+
   display: flex;
   flex-wrap: wrap;
   font-size: 1.4rem;
   gap: 1rem;
   margin-top: 0;
   white-space: nowrap;
-
-  @include media-breakpoint-down(md) {
-    justify-content: center;
-  }
 }

src/components/Author/Userpic/Userpic.module.scss

@@ -86,17 +86,17 @@
   }
 
   &.XL {
+    @include media-breakpoint-up(md) {
+      margin: 0;
+      max-width: 100%;
+    }
+
     aspect-ratio: 1/1;
     margin: 0 auto 1rem;
     max-width: 168px;
     height: auto;
     width: 100%;
 
-    @include media-breakpoint-up(md) {
-      margin: 0;
-      max-width: 100%;
-    }
-
     .letters {
       align-items: center;
       display: flex;

src/components/Discours/Banner.module.scss

@@ -1,12 +1,12 @@
 .discoursBanner {
-  background: #f8f8f8;
-  margin-bottom: 6.4rem;
-  padding: 0.8rem 0 0;
-
   @include media-breakpoint-down(sm) {
     font-size: 80%;
   }
 
+  background: #f8f8f8;
+  margin-bottom: 6.4rem;
+  padding: 0.8rem 0 0;
+
   h3 {
     font-size: 3.2rem;
     font-weight: 800;

src/components/Discours/Donate.module.scss

@@ -24,12 +24,12 @@
   }
 
   &:focus {
+    box-shadow: inset 0 0 0 3px #000;
+
     &::placeholder {
       opacity: 0;
       transition: opacity 0.2s ease;
     }
-
-    box-shadow: inset 0 0 0 3px #000;
   }
 
   &:valid,
@@ -49,18 +49,18 @@
 }
 
 .donateForm .btn {
+  @include media-breakpoint-down(sm) {
+    &:last-of-type {
+      margin-right: 0 !important;
+    }
+  }
+
   cursor: pointer;
   flex: 1;
   padding: 5px 10px;
   text-align: center;
   white-space: nowrap;
   transform: none !important;
-
-  @include media-breakpoint-down(sm) {
-    &:last-of-type {
-      margin-right: 0 !important;
-    }
-  }
 }
 
 .btnGroup {
@@ -82,22 +82,22 @@
 }
 
 .donateButtonsContainer {
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+  }
+
   align-items: center;
   display: flex;
   flex: 1;
   justify-content: space-between;
 
-  @include media-breakpoint-down(sm) {
-    flex-wrap: wrap;
-  }
-
   input,
   label {
-    margin: 0 8px;
-
     @include media-breakpoint-down(sm) {
       margin-bottom: 1em;
     }
+
+    margin: 0 8px;
   }
 
   input {

src/components/Discours/Footer.module.scss

@@ -88,16 +88,16 @@
 }
 
 .socialItem {
-  margin-top: 1em;
-  text-align: center;
-  width: 25%;
-
   @include media-breakpoint-up(md) {
     margin-top: 0;
     margin-left: 0.3em;
     text-align: right;
   }
 
+  margin-top: 1em;
+  text-align: center;
+  width: 25%;
+
   a:link {
     border: none;
     padding-bottom: 0;

src/components/Editor/Prosemirror.scss

@@ -86,25 +86,25 @@ mark.highlight {
   }
 
   [data-float='half-left'] {
+    @include media-breakpoint-up(md) {
+      max-width: 50%;
+      min-width: 30%;
+    }
+
     float: left;
     margin: 1rem 1rem 0;
     clear: left;
-
-    @include media-breakpoint-up(md) {
-      max-width: 50%;
-      min-width: 30%;
-    }
   }
 
   [data-float='half-right'] {
-    float: right;
-    margin: 1rem 0;
-    clear: right;
-
     @include media-breakpoint-up(md) {
       max-width: 50%;
       min-width: 30%;
     }
+
+    float: right;
+    margin: 1rem 0;
+    clear: right;
   }
 }
 
@@ -137,23 +137,8 @@ mark.highlight {
   }
 
   &[data-type='punchline'] {
-    border: solid #000;
-    border-width: 2px 0;
-
     @include font-size(3.2rem);
 
-    font-weight: 700;
-    line-height: 1.2;
-    margin: 1em 0;
-    padding: 2.4rem 0;
-
-    &[data-float='left'],
-    &[data-float='right'] {
-      @include font-size(2.2rem);
-
-      line-height: 1.4;
-    }
-
     @include media-breakpoint-up(sm) {
       &[data-float='left'] {
         margin-right: 1.5em;
@@ -165,18 +150,26 @@ mark.highlight {
         clear: right;
       }
     }
+
+    border: solid #000;
+    border-width: 2px 0;
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 1em 0;
+    padding: 2.4rem 0;
+
+    &[data-float='left'],
+    &[data-float='right'] {
+      @include font-size(2.2rem);
+
+      line-height: 1.4;
+    }
   }
 }
 
 .ProseMirror article[data-type='incut'] {
-  background: #f1f2f3;
-
   @include font-size(1.4rem);
 
-  margin: 1em -1rem;
-  padding: 2em 2rem;
-  transition: background 0.3s ease-in-out;
-
   @include media-breakpoint-up(sm) {
     margin-left: -2rem;
     margin-right: -2rem;
@@ -193,6 +186,11 @@ mark.highlight {
     margin-right: -3em;
   }
 
+  background: #f1f2f3;
+  margin: 1em -1rem;
+  padding: 2em 2rem;
+  transition: background 0.3s ease-in-out;
+
   &[data-float] img {
     float: none;
     max-width: unset;
@@ -202,9 +200,6 @@ mark.highlight {
 
   &[data-float='left'],
   &[data-float='half-left'] {
-    margin-left: -1rem;
-    clear: left;
-
     @include media-breakpoint-up(sm) {
       margin-left: -2rem;
       margin-right: 2rem;
@@ -217,13 +212,13 @@ mark.highlight {
     @include media-breakpoint-up(xl) {
       margin-left: -12.5%;
     }
+
+    margin-left: -1rem;
+    clear: left;
   }
 
   &[data-float='right'],
   &[data-float='half-right'] {
-    margin-right: -1rem;
-    clear: right;
-
     @include media-breakpoint-up(sm) {
       margin-left: 2rem;
       margin-right: -2rem;
@@ -236,6 +231,9 @@ mark.highlight {
     @include media-breakpoint-up(xl) {
       margin-right: -12.5%;
     }
+
+    margin-right: -1rem;
+    clear: right;
   }
 
   *:last-child {

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -1,16 +1,16 @@
 .shoutCard {
-  display: flex;
-  flex-direction: column;
-  line-height: 1.2;
-  margin-bottom: 2.4rem;
-  position: relative;
-
   @include media-breakpoint-up(md) {
     &:last-child {
       margin-bottom: 0;
     }
   }
 
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+  margin-bottom: 2.4rem;
+  position: relative;
+
   &:hover {
     .shoutCardCover {
       img,
@@ -437,18 +437,15 @@
 }
 
 .shoutCardWithCover {
-  aspect-ratio: 16/9;
-  width: 100%;
-
   @include media-breakpoint-down(xl) {
     aspect-ratio: auto;
     height: 100%;
   }
 
-  swiper-slide & {
   aspect-ratio: 16/9;
-    margin-bottom: 0;
+  width: 100%;
 
+  swiper-slide & {
     @include media-breakpoint-down(lg) {
       aspect-ratio: 1/1;
     }
@@ -464,6 +461,9 @@
         padding-left: 10%;
       }
     }
+
+    aspect-ratio: 16/9;
+    margin-bottom: 0;
   }
 
   &.shoutCardNoImage {
@@ -501,15 +501,15 @@
   }
 
   .shoutCardContent {
+    @include media-breakpoint-down(xl) {
+      position: relative;
+    }
+
     display: flex;
     flex-direction: column;
     justify-content: end;
     padding: 30% 2.4rem 2.4rem;
     z-index: 1;
-
-    @include media-breakpoint-down(xl) {
-      position: relative;
-    }
   }
 
   .shoutCardCover {
@@ -656,12 +656,6 @@
 }
 
 .shoutCardVertical {
-  aspect-ratio: auto;
-  height: 100%;
-  min-height: 250px;
-  margin: 0;
-  padding: 0;
-
   @include media-breakpoint-up(sm) {
     aspect-ratio: 2/1;
   }
@@ -674,13 +668,19 @@
     aspect-ratio: 1/1.6;
   }
 
+  aspect-ratio: auto;
+  height: 100%;
+  min-height: 250px;
+  margin: 0;
+  padding: 0;
+
   .shoutCardTitle,
   .shoutCardSubtitle {
-    font-size: 2.2rem !important;
-
     @include media-breakpoint-between(lg, xl) {
       font-size: 1.8rem !important;
     }
+
+    font-size: 2.2rem !important;
   }
 
   .shoutCardContent {

src/components/Feed/Beside.module.scss

@@ -1,12 +1,12 @@
 .besideColumn {
-  counter-reset: item;
-  list-style-type: none;
-  padding-left: 0;
-
   @include media-breakpoint-up(md) {
     margin-bottom: 0;
   }
 
+  counter-reset: item;
+  list-style-type: none;
+  padding-left: 0;
+
   a {
     border: none;
   }

src/components/Feed/FeedArticlePopup/FeedArticlePopup.module.scss

@@ -1,15 +1,15 @@
 .feedArticlePopup {
-  padding: 0 !important;
-  text-align: left;
-  overflow: hidden;
-  margin-top: -14px;
-
   @include media-breakpoint-down(md) {
     left: auto !important;
     right: 0;
     transform: none !important;
   }
 
+  padding: 0 !important;
+  text-align: left;
+  overflow: hidden;
+  margin-top: -14px;
+
   .actionList {
     & > li {
       margin-bottom: 0 !important;

src/components/Feed/Group.scss

@@ -35,9 +35,6 @@
 }
 
 .floor--group {
-  background: #e8e5f0;
-  padding: 4rem 0 0;
-
   @include media-breakpoint-up(md) {
     padding-bottom: 3rem;
   }
@@ -49,4 +46,7 @@
       }
     }
   }
+
+  background: #e8e5f0;
+  padding: 4rem 0 0;
 }

src/components/Feed/Placeholder/Placeholder.module.scss

@@ -12,12 +12,11 @@
 
   button,
   .button {
+    @include font-size(1.5rem);
+
     align-items: center;
     border-radius: 1.2rem;
     display: flex;
-
-    @include font-size(1.5rem);
-
     gap: 0.6rem;
     justify-content: center;
     margin-top: 3rem;
@@ -32,14 +31,14 @@
 }
 
 .placeholder--feed-mode {
-  flex-direction: column;
-  min-height: 40rem;
-  text-align: center;
-
   @include media-breakpoint-up(lg) {
     aspect-ratio: 1 / 0.8;
   }
 
+  flex-direction: column;
+  min-height: 40rem;
+  text-align: center;
+
   .placeholderCover {
     flex: 1 100%;
     position: relative;
@@ -68,8 +67,6 @@
 }
 
 .placeholder--profile-mode {
-  min-height: 40rem;
-
   @include media-breakpoint-down(lg) {
     display: block;
   }
@@ -79,36 +76,30 @@
     min-height: auto;
   }
 
-  .placeholderCover {
+  min-height: 40rem;
-    flex: 1;
-    padding: 1.6rem;
 
+  .placeholderCover {
     @include media-breakpoint-up(lg) {
       order: 2;
       position: static;
     }
 
+    flex: 1;
+    padding: 1.6rem;
+
     img {
+      @include media-breakpoint-up(lg) {
+        object-position: right;
+      }
+
       aspect-ratio: 16/10;
       min-width: 40rem;
       object-fit: contain;
       width: 100%;
-
-      @include media-breakpoint-up(lg) {
-        object-position: right;
-      }
     }
   }
 
   .placeholderContent {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    font-size: 1.4rem;
-    line-height: 1.2;
-    min-width: 60%;
-    padding: 0 2rem 2rem;
-
     @include media-breakpoint-up(md) {
       font-size: 1.6rem;
       padding: 3rem;
@@ -117,6 +108,14 @@
     @include media-breakpoint-up(lg) {
       font-size: 2rem;
     }
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 1.4rem;
+    line-height: 1.2;
+    min-width: 60%;
+    padding: 0 2rem 2rem;
   }
 
   h3 {
@@ -124,6 +123,12 @@
   }
 
   .button {
+    @include media-breakpoint-up(lg) {
+      left: auto;
+      position: absolute;
+      width: auto;
+    }
+
     background: var(--background-color-invert);
     bottom: 2rem;
     color: var(--default-color-invert);
@@ -132,12 +137,6 @@
     right: 2rem;
     width: 100%;
 
-    @include media-breakpoint-up(lg) {
-      left: auto;
-      position: absolute;
-      width: auto;
-    }
-
     .icon {
       filter: invert(1);
     }
@@ -156,13 +155,13 @@
 }
 
 .placeholderContent {
-  padding: 1.6rem;
-
   @include media-breakpoint-down(lg) {
     br {
       display: none;
     }
   }
+
+  padding: 1.6rem;
 }
 
 .placeholder--feedMy,
@@ -234,17 +233,16 @@
 }
 
 .bottomLinks {
-  display: flex;
-
   @include font-size(1.6rem);
 
-  gap: 4rem;
-
   @include media-breakpoint-down(sm) {
     flex-direction: column;
     gap: 1.4rem;
   }
 
+  display: flex;
+  gap: 4rem;
+
   a {
     border: none !important;
     padding-left: 2.6rem;

src/components/Feed/Sidebar/Sidebar.module.scss

@@ -1,9 +1,4 @@
 .sidebar {
-  margin-top: -0.7rem;
-  max-height: calc(100vh - 120px);
-  overflow: auto;
-  top: 120px;
-
   @include media-breakpoint-up(md) {
     margin-top: 0;
     position: sticky;
@@ -15,6 +10,11 @@
     }
   }
 
+  margin-top: -0.7rem;
+  max-height: calc(100vh - 120px);
+  overflow: auto;
+  top: 120px;
+
   .sidebarItemName {
     background: transparent;
     align-items: center;
@@ -71,10 +71,6 @@
   }
 
   .settings {
-    display: flex;
-    justify-content: space-between;
-    margin: 2em 0;
-
     @include media-breakpoint-down(md) {
       margin: 0;
       position: absolute;
@@ -85,6 +81,10 @@
       right: 2px;
     }
 
+    display: flex;
+    justify-content: space-between;
+    margin: 2em 0;
+
     a {
       border: none;
     }

src/components/Nav/AuthModal/AuthModal.module.scss

@@ -1,13 +1,13 @@
 .view {
+  @include media-breakpoint-up(md) {
+    min-height: 600px;
+  }
+
   background: var(--background-color);
   min-height: 550px;
   position: relative;
   justify-content: center;
 
-  @include media-breakpoint-up(md) {
-    min-height: 600px;
-  }
-
   input {
     font-size: 1.7rem;
   }
@@ -41,6 +41,10 @@
 .authImage {
   @include font-size(1.5rem);
 
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+
   background: var(--background-color-invert)
     url('https://images.discours.io/unsafe/1600x/production/image/auth-page.jpg') center no-repeat;
   background-size: cover;
@@ -49,10 +53,6 @@
   padding: 3em;
   position: relative;
 
-  @include media-breakpoint-down(sm) {
-    display: none;
-  }
-
   h2 {
     text-transform: uppercase;
   }
@@ -118,13 +118,13 @@
 }
 
 .auth {
-  display: flex;
-  flex-direction: column;
-  padding: $container-padding-x;
-
   @include media-breakpoint-up(lg) {
     padding: 4rem !important;
   }
+
+  display: flex;
+  flex-direction: column;
+  padding: $container-padding-x;
 }
 
 .submitButton {

src/components/Nav/AuthModal/PasswordField/PasswordField.module.scss

@@ -26,13 +26,13 @@
     line-height: 16px;
     margin-top: 0.3em;
 
+    /* Red/500 */
+    color: orange;
+
     &.registerPassword {
       margin-bottom: -32px;
     }
 
-    /* Red/500 */
-    color: orange;
-
     a {
       color: orange;
       border-color: orange;

src/components/Nav/ConfirmModal/ConfirmModal.module.scss

@@ -5,14 +5,14 @@
   .confirmModalTitle {
     @include font-size(3.2rem);
 
+    @include media-breakpoint-up(sm) {
+      margin: 0 10%;
+    }
+
     color: var(--default-color);
     font-weight: 700;
     margin: 0 3rem;
     text-align: center;
-
-    @include media-breakpoint-up(sm) {
-      margin: 0 10%;
-    }
   }
 
   .confirmModalActions {

src/components/Nav/Header/Header.module.scss

@@ -8,11 +8,11 @@
   z-index: 10003;
 
   .wide-container {
-    background: var(--background-color);
-
     @include media-breakpoint-down(lg) {
       padding: 0 divide($container-padding-x, 2);
     }
+
+    background: var(--background-color);
   }
 }
 
@@ -49,6 +49,10 @@
   justify-content: flex-start;
 
   .fixed & {
+    @include media-breakpoint-down(md) {
+      border-bottom: 2px solid #000;
+    }
+
     left: 0;
     position: fixed;
     right: 0;
@@ -56,10 +60,6 @@
     margin: 0;
     padding: 0;
     z-index: 9;
-
-    @include media-breakpoint-down(md) {
-      border-bottom: 2px solid #000;
-    }
   }
 
   > * {
@@ -104,17 +104,17 @@
 }
 
 .usernav {
-  display: inline-flex;
-  font-weight: 500;
-  justify-content: end;
-  position: relative;
-
   @include media-breakpoint-down(lg) {
     max-width: 100% !important;
     position: absolute;
     right: 0;
   }
 
+  display: inline-flex;
+  font-weight: 500;
+  justify-content: end;
+  position: relative;
+
   .control {
     align-items: center;
     display: flex;
@@ -124,22 +124,18 @@
 .mainNavigationWrapper {
   @include font-size(1.7rem);
 
-  position: relative;
-
   @include media-breakpoint-down(lg) {
     display: none;
   }
 
+  position: relative;
+
   .fixed & {
     display: block;
   }
 }
 
 .mainNavigation {
-  font-size: 1.4rem !important;
-  opacity: 1;
-  transition: opacity 0.3s;
-
   // margin: 0 0 0 -0.4rem !important;
 
   @include media-breakpoint-down(lg) {
@@ -197,6 +193,10 @@
     padding: divide($container-padding-x, 2) !important;
   }
 
+  font-size: 1.4rem !important;
+  opacity: 1;
+  transition: opacity 0.3s;
+
   :global(.view-switcher) {
     margin: 0;
     overflow: hidden;
@@ -295,12 +295,12 @@
 }
 
 .burgerContainer {
-  box-sizing: content-box;
-  display: inline-flex;
-
   @include media-breakpoint-up(lg) {
     display: none;
   }
+
+  box-sizing: content-box;
+  display: inline-flex;
 }
 
 .burger {
@@ -382,6 +382,10 @@
 .articleHeader {
   @include font-size(1.4rem);
 
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+
   left: $container-padding-x;
   margin: 0.2em 0;
   overflow: hidden;
@@ -389,10 +393,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
-
-  @include media-breakpoint-down(md) {
-    display: none;
-  }
 }
 
 .iconHover {
@@ -412,6 +412,10 @@
 }
 
 .articleControls {
+  @include media-breakpoint-up(xl) {
+    right: 1.4rem;
+  }
+
   display: flex;
   justify-content: flex-end;
   position: absolute;
@@ -420,10 +424,6 @@
   transform: translateY(-50%);
   width: 100%;
 
-  @include media-breakpoint-up(xl) {
-    right: 1.4rem;
-  }
-
   .control {
     border: 0;
     cursor: pointer;
@@ -454,11 +454,11 @@
 }
 
 .articleControlsAuthorized {
-  right: 3.6rem;
-
   @include media-breakpoint-up(xl) {
     right: 9rem;
   }
+
+  right: 3.6rem;
 }
 
 .userControl {
@@ -517,6 +517,16 @@
 }
 
 .userControlItem {
+  @include media-breakpoint-up(md) {
+    height: 3.2rem;
+    margin: 0 0.7rem;
+    width: 3.2rem;
+  }
+
+  @include media-breakpoint-down(xl) {
+    margin-left: 0.4rem !important;
+  }
+
   align-items: center;
   border-radius: 100%;
   display: flex;
@@ -528,16 +538,6 @@
   transition: margin-left 0.3s;
   width: 2.8rem;
 
-  @include media-breakpoint-up(md) {
-    height: 3.2rem;
-    margin: 0 0.7rem;
-    width: 3.2rem;
-  }
-
-  @include media-breakpoint-down(xl) {
-    margin-left: 0.4rem !important;
-  }
-
   .headerScrolledTop &,
   .headerScrolledBottom & {
     transition: none;
@@ -584,65 +584,29 @@
 }
 
 .userControlItemSearch {
-  margin: 0 1rem 0 2.2rem;
-
   @include media-breakpoint-down(xl) {
     order: 1;
   }
+
+  margin: 0 1rem 0 2.2rem;
 }
 
 .userControlItemUserpic {
-  height: 3.2rem;
-  width: 3.2rem;
-
   @include media-breakpoint-up(md) {
     height: 4rem;
     width: 4rem;
   }
+
+  height: 3.2rem;
+  width: 3.2rem;
 }
 
 .userControlItemVerbose {
-  align-items: stretch;
-  display: flex;
-  height: 3.2rem;
-  margin-left: 1rem !important;
-  width: 3.2rem;
-
   @include media-breakpoint-up(md) {
     height: 4rem;
     width: 4rem;
   }
 
-  &:first-child {
-    margin-left: 0 !important;
-  }
-
-  &:global(.loginbtn) {
-    background: #e9e9ee;
-
-    @include media-breakpoint-up(xl) {
-      background: none;
-      margin-left: 0.8rem !important;
-    }
-
-    .icon {
-      height: 2.4rem;
-      width: 2.4rem;
-    }
-
-    a:hover {
-      .icon {
-        display: block;
-      }
-    }
-
-    img {
-      max-width: none;
-      height: 2.4rem;
-      width: 2.4rem;
-    }
-  }
-
   @include media-breakpoint-up(xl) {
     margin-left: 3rem !important;
     margin-right: 0;
@@ -666,19 +630,55 @@
     }
   }
 
+  align-items: stretch;
+  display: flex;
+  height: 3.2rem;
+  margin-left: 1rem !important;
+  width: 3.2rem;
+
+  &:first-child {
+    margin-left: 0 !important;
+  }
+
+  &:global(.loginbtn) {
+    @include media-breakpoint-up(xl) {
+      background: none;
+      margin-left: 0.8rem !important;
+    }
+
+    background: #e9e9ee;
+
+    .icon {
+      height: 2.4rem;
+      width: 2.4rem;
+    }
+
+    a:hover {
+      .icon {
+        display: block;
+      }
+    }
+
+    img {
+      max-width: none;
+      height: 2.4rem;
+      width: 2.4rem;
+    }
+  }
+
   a:link,
   a:visited,
   button {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
     @include media-breakpoint-up(xl) {
       border-radius: 2rem;
       box-shadow: inset 0 0 0 2px #000;
       padding: 0 2rem;
     }
 
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
     &:hover {
       @include media-breakpoint-up(xl) {
         background-color: var(--link-hover-background);
@@ -710,17 +710,21 @@
 
 .userControlItemCreate {
   .icon {
-    height: 2.8rem;
-    width: 2.8rem;
-
     @include media-breakpoint-up(md) {
       height: 3.2rem;
       width: 3.2rem;
     }
+
+    height: 2.8rem;
+    width: 2.8rem;
   }
 }
 
 .subnavigation {
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+
   background: #000;
   color: #fff;
   font-weight: 500;
@@ -730,11 +734,11 @@
   transform: translateY(-2px);
   width: 100%;
 
-  @include media-breakpoint-down(md) {
+  ul {
-    display: none;
+    @include media-breakpoint-up(xl) {
+      margin: 0 calc(0.5 * var(--bs-gutter-x));
     }
 
-  ul {
     display: flex;
     flex-wrap: wrap;
     height: 6rem;
@@ -744,10 +748,6 @@
     position: relative;
     overflow: hidden;
 
-    @include media-breakpoint-up(xl) {
-      margin: 0 calc(0.5 * var(--bs-gutter-x));
-    }
-
     li {
       margin-right: 2.4rem;
       white-space: nowrap;

src/components/Nav/Modal/Modal.module.scss

@@ -20,14 +20,18 @@
   z-index: 1;
 
   &:not([class*='col-']) {
-    width: 100%;
-
     @include media-breakpoint-up(sm) {
       width: 80%;
     }
+
+    width: 100%;
   }
 
   .close {
+    @include media-breakpoint-up(sm) {
+      right: 2rem;
+    }
+
     position: absolute;
     top: 2rem;
     cursor: pointer;
@@ -39,10 +43,6 @@
     transition: opacity 0.3s;
     z-index: 1;
 
-    @include media-breakpoint-up(sm) {
-      right: 2rem;
-    }
-
     &:hover {
       opacity: 0.5;
     }
@@ -59,10 +59,6 @@
   }
 
   &.narrow {
-    left: 50%;
-    transform: translateX(-50%);
-    width: 100%;
-
     @include media-breakpoint-up(sm) {
       max-width: 600px;
     }
@@ -71,6 +67,10 @@
       width: 65%;
     }
 
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+
     .close {
       right: 1.6rem;
       top: 1.6rem;
@@ -83,21 +83,20 @@
 }
 
 .modalInner {
+  @include media-breakpoint-up(sm) {
+    padding: 5rem;
+  }
+
   height: 100%;
   overflow: auto;
   padding: 5.4rem 2.4rem 2.4rem;
   position: relative;
   text-align: left;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 
-  @include media-breakpoint-up(sm) {
+  &::-webkit-scrollbar {
-    padding: 5rem;
+    display: none;
   }
 }
 

src/components/Nav/SearchModal/SearchModal.module.scss

@@ -60,10 +60,9 @@
 }
 
 .searchDescription {
-  margin-bottom: 44px;
-
   @include font-size(1.6rem);
 
+  margin-bottom: 44px;
   color: rgb(255 255 255 / 64%);
 }
 

src/components/Nav/TopicsNav/TopicsNav.module.scss

@@ -1,12 +1,4 @@
 .Topics {
-  font-size: 1.6rem;
-  height: 6rem;
-  line-height: 6rem;
-  margin-bottom: 3rem;
-  overflow: hidden;
-  position: relative;
-  transform: translateY(-2px);
-
   @include media-breakpoint-down(sm) {
     padding: 0 divide($container-padding-x, 2);
   }
@@ -15,7 +7,21 @@
     @include font-size(1.4rem);
   }
 
+  font-size: 1.6rem;
+  height: 6rem;
+  line-height: 6rem;
+  margin-bottom: 3rem;
+  overflow: hidden;
+  position: relative;
+  transform: translateY(-2px);
+
   .list {
+    @include media-breakpoint-up(lg) {
+      flex-wrap: wrap;
+      overflow: hidden;
+      padding-right: 7em;
+    }
+
     display: flex;
     font-weight: 500;
     list-style: none;
@@ -23,18 +29,16 @@
     overflow: auto;
     padding: 0;
     position: relative;
-
-    @include media-breakpoint-up(lg) {
-      flex-wrap: wrap;
-      overflow: hidden;
-      padding-right: 7em;
-    }
   }
 
   .item {
     margin-right: 2.4rem;
 
     &.right {
+      @include media-breakpoint-up(lg) {
+        display: block;
+      }
+
       display: none;
       margin-right: 0;
       position: absolute;
@@ -42,10 +46,6 @@
       top: 0;
       white-space: nowrap;
 
-      @include media-breakpoint-up(lg) {
-        display: block;
-      }
-
       :global(.icon) {
         display: inline-block;
         margin-left: 0.3em;

src/components/NotificationsPanel/NotificationsPanel.module.scss

@@ -16,6 +16,10 @@ $transition-duration: 200ms;
     width 0ms linear $transition-duration;
 
   .panel {
+    @include media-breakpoint-up(md) {
+      width: 50%;
+    }
+
     position: relative;
     background-color: var(--background-color);
     width: 100%;
@@ -25,10 +29,6 @@ $transition-duration: 200ms;
     display: flex;
     flex-direction: column;
 
-    @include media-breakpoint-up(md) {
-      width: 50%;
-    }
-
     .title {
       @include font-size(2rem);
 

src/components/TableOfContents/TableOfContents.module.scss

@@ -1,9 +1,4 @@
 .TableOfContentsFixedWrapper {
-  min-height: 100%;
-  position: relative;
-  z-index: 1;
-  top: 0;
-
   @include media-breakpoint-down(xl) {
     background: #000;
     bottom: 0;
@@ -34,6 +29,11 @@
     }
   }
 
+  min-height: 100%;
+  position: relative;
+  z-index: 1;
+  top: 0;
+
   &:not(.TableOfContentsFixedWrapperLefted) {
     margin-top: -0.2em;
 
@@ -63,14 +63,6 @@
 }
 
 .TableOfContentsContainer {
-  top: 100px;
-  right: 20px;
-  display: flex;
-  width: 100%;
-  overflow: auto;
-  align-items: flex-start;
-  background-color: transparent;
-
   @include media-breakpoint-up(xl) {
     flex-direction: column;
     height: calc(100vh - 120px);
@@ -80,6 +72,14 @@
       height: calc(100vh - 250px);
     }
   }
+
+  top: 100px;
+  right: 20px;
+  display: flex;
+  width: 100%;
+  overflow: auto;
+  align-items: flex-start;
+  background-color: transparent;
 }
 
 .TableOfContentsContainerInner {
@@ -107,16 +107,6 @@
 }
 
 .TableOfContentsPrimaryButton {
-  position: absolute;
-  right: 0;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-
   @include media-breakpoint-down(xl) {
     background: #fff;
     border: 1px solid #000;
@@ -129,6 +119,16 @@
     width: 40px;
   }
 
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
   &:hover {
     filter: invert(1);
   }

src/components/Topic/Card.module.scss

@@ -7,9 +7,6 @@
 }
 
 .topic {
-  align-items: baseline;
-  margin-top: 3.2rem;
-
   @include media-breakpoint-down(sm) {
     margin: 0;
     position: relative;
@@ -31,6 +28,9 @@
       }
     }
   }
+
+  align-items: baseline;
+  margin-top: 3.2rem;
 }
 
 .topicDetails {
@@ -38,6 +38,12 @@
 }
 
 .topicInRow {
+  @include media-breakpoint-up(sm) {
+    .topicDescription {
+      margin-bottom: 0;
+    }
+  }
+
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -46,12 +52,6 @@
   button {
     margin-top: 0;
   }
-
-  @include media-breakpoint-up(sm) {
-    .topicDescription {
-      margin-bottom: 0;
-    }
-  }
 }
 
 .topicTitle {
@@ -100,13 +100,13 @@
 }
 
 .controlContainer {
-  margin-bottom: 1.6rem;
-
   @include media-breakpoint-up(sm) {
     .topicCompact & {
       text-align: right;
     }
   }
+
+  margin-bottom: 1.6rem;
 }
 
 .topicCompact {

src/components/Topic/FloorHeader.scss

@@ -3,6 +3,10 @@ h3::first-letter {
 }
 
 .all-materials {
+  @include media-breakpoint-up(sm) {
+    text-align: right;
+  }
+
   align-self: baseline;
   margin-bottom: 1em;
   white-space: nowrap;
@@ -11,10 +15,6 @@ h3::first-letter {
     border: none;
   }
 
-  @include media-breakpoint-up(sm) {
-    text-align: right;
-  }
-
   .icon {
     display: inline-block;
     height: 0.8em;

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -139,9 +139,6 @@
 .stats {
   @include font-size(1.5rem);
 
-  color: var(--secondary-color);
-  display: flex;
-
   @include media-breakpoint-down(md) {
     flex-wrap: wrap;
   }
@@ -150,6 +147,9 @@
     margin-top: 0.5em;
   }
 
+  color: var(--secondary-color);
+  display: flex;
+
   .statsItem {
     @include font-size(1.4rem);
 

src/components/Views/AllAuthors/AllAuthors.module.scss

@@ -1,19 +1,19 @@
 .group {
   @include font-size(1.6rem);
 
-  margin: 3em 0 9.6rem;
-
   @include media-breakpoint-down(sm) {
     margin-bottom: 6.4rem;
   }
 
-  h2 {
+  margin: 3em 0 9.6rem;
-    margin-bottom: 3.2rem;
-    text-transform: capitalize;
 
+  h2 {
     @include media-breakpoint-down(sm) {
       margin-bottom: 1.6rem;
     }
+
+    margin-bottom: 3.2rem;
+    text-transform: capitalize;
   }
 
   .topic {
@@ -35,12 +35,12 @@
   text-align: center;
 
   .loadMoreButton {
-    padding: 0.6em 3em;
-    width: 100%;
-
     @include media-breakpoint-up(sm) {
       width: auto;
     }
+
+    padding: 0.6em 3em;
+    width: 100%;
   }
 }
 
@@ -72,12 +72,12 @@
 }
 
 .viewSwitcher {
-  margin-bottom: 2rem;
-  width: 100%;
-
   @include media-breakpoint-down(sm) {
     overflow-x: auto;
   }
+
+  margin-bottom: 2rem;
+  width: 100%;
 }
 
 

src/components/Views/AllTopics/AllTopics.module.scss

@@ -1,19 +1,19 @@
 .group {
   @include font-size(1.6rem);
 
-  margin: 3em 0 9.6rem;
-
   @include media-breakpoint-down(sm) {
     margin-bottom: 6.4rem;
   }
 
-  h2 {
+  margin: 3em 0 9.6rem;
-    margin-bottom: 3.2rem;
-    text-transform: capitalize;
 
+  h2 {
     @include media-breakpoint-down(sm) {
       margin-bottom: 1.6rem;
     }
+
+    margin-bottom: 3.2rem;
+    text-transform: capitalize;
   }
 }
 
@@ -36,12 +36,12 @@
   text-align: center;
 
   .loadMoreButton {
-    padding: 0.6em 3em;
-    width: 100%;
-
     @include media-breakpoint-up(sm) {
       width: auto;
     }
+
+    padding: 0.6em 3em;
+    width: 100%;
   }
 }
 

src/components/Views/Author/Author.module.scss

@@ -8,24 +8,24 @@
   }
 
   .groupControls {
-    margin-bottom: 2rem !important;
-    margin-top: 0 !important;
-
     @include media-breakpoint-up(md) {
       margin-bottom: 6rem !important;
     }
+
+    margin-bottom: 2rem !important;
+    margin-top: 0 !important;
   }
 }
 
 .authorHeader {
+  @include media-breakpoint-up(lg) {
+    margin-top: -3.2rem;
+  }
+
   border-bottom: 2px solid var(--default-color);
   margin-bottom: 2.4rem;
   margin-top: 1.8rem;
   padding-bottom: 4rem;
-
-  @include media-breakpoint-up(lg) {
-    margin-top: -3.2rem;
-  }
 }
 
 .ratingContainer {
@@ -44,13 +44,13 @@
 }
 
 .additionalControls {
-  display: none;
-  white-space: nowrap;
-
   @include media-breakpoint-up(md) {
     display: block;
     text-align: right;
   }
+
+  display: none;
+  white-space: nowrap;
 }
 
 .loadingWrapper {

src/components/Views/Create.module.scss

@@ -13,16 +13,16 @@
 }
 
 .saveBlock {
+  @include media-breakpoint-up(md) {
+    padding: 3.2rem 8rem;
+  }
+
   background: #f1f1f1;
   line-height: 1.4;
   margin-top: 6.4rem;
   padding: 1.6rem 3.2rem;
   text-align: center;
 
-  @include media-breakpoint-up(md) {
-    padding: 3.2rem 8rem;
-  }
-
   .button {
     margin: 0 divide($container-padding-x, 2);
   }

src/components/Views/EditView/EditView.module.scss

@@ -51,13 +51,6 @@
       @include font-size(1.4rem);
 
       appearance: textfield;
-
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        appearance: none;
-        margin: 0;
-      }
-
       font-weight: 600;
       padding: 0;
       margin: 14px 0 0;
@@ -65,6 +58,12 @@
       border: none;
       outline: none;
 
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
+
       &::placeholder {
         color: var(--secondary-color);
       }
@@ -131,6 +130,14 @@
 }
 
 .scrollTopButton {
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+
+  @include media-breakpoint-up(xl) {
+    left: 0;
+  }
+
   pointer-events: none;
   user-select: none;
   cursor: pointer;
@@ -147,14 +154,6 @@
     pointer-events: all;
   }
 
-  @include media-breakpoint-down(md) {
-    display: none;
-  }
-
-  @include media-breakpoint-up(xl) {
-    left: 0;
-  }
-
   &:hover {
     .icon {
       opacity: 1;

src/components/Views/Feed/Feed.module.scss

@@ -10,11 +10,11 @@
   font-weight: 500;
 
   h4 {
-    margin-bottom: 0.8em;
-
     @include media-breakpoint-down(md) {
       display: none;
     }
+
+    margin-bottom: 0.8em;
   }
 
   ul,
@@ -192,17 +192,17 @@
 }
 
 .filtersContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 4rem;
-
   @include media-breakpoint-down(sm) {
     margin: 1rem 0 0;
     flex-direction: column;
     gap: 1rem;
   }
 
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 4rem;
+
   .feedFilter {
     margin-top: 0;
     margin-bottom: 0;

src/components/Views/Profile/Settings.module.scss

@@ -73,8 +73,6 @@ h5 {
 }
 
 .discoursName {
-  display: flex;
-
   @include media-breakpoint-down(sm) {
     flex-wrap: wrap;
 
@@ -83,6 +81,8 @@ h5 {
     }
   }
 
+  display: flex;
+
   label {
     margin: 0.6em 0.5em 0 0;
   }
@@ -298,11 +298,11 @@ h5 {
   }
 
   .cancelLabelMobile {
-    display: none;
-
     @include media-breakpoint-down(sm) {
       display: block;
     }
+
+    display: none;
   }
 
   :global(.row) > * {

src/components/_shared/FloatingPanel/FloatingPanel.module.scss

@@ -1,4 +1,12 @@
 .PanelWrapper {
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+
+    input {
+      min-width: 250px;
+    }
+  }
+
   position: fixed;
   bottom: 20px;
   left: 0;
@@ -13,14 +21,6 @@
   padding: 14px;
   background-color: var(--background-color);
   border: 2px solid black;
-
-  @include media-breakpoint-down(sm) {
-    flex-wrap: wrap;
-
-    input {
-      min-width: 250px;
-    }
-  }
 }
 
 .PanelWrapperVisible {

src/components/_shared/Icon/Icon.module.scss

@@ -10,6 +10,10 @@
 }
 
 .notificationsCounter {
+  @include media-breakpoint-up(md) {
+    left: 1.8rem;
+  }
+
   align-items: center;
   background-color: #E84500;
   border-radius: 0.8rem;
@@ -25,8 +29,4 @@
   position: absolute;
   text-align: center;
   top: -0.5rem;
-
-  @include media-breakpoint-up(md) {
-    left: 1.8rem;
-  }
 }

src/components/_shared/Newsletter/Newsletter.module.scss

@@ -1,23 +1,31 @@
 .form {
-  display: flex;
-  flex-direction: column;
-
   @include media-breakpoint-down(xxl) {
     margin-bottom: 2.4rem;
   }
+
+  display: flex;
+  flex-direction: column;
 }
 
 .controls {
-  display: flex;
-  width: 100%;
-
   @include media-breakpoint-down(xxl) {
     flex-direction: column;
   }
 
+  display: flex;
+  width: 100%;
+
   .input {
     @include font-size(2rem);
 
+    @include media-breakpoint-up(xxl) {
+      border-right: none;
+    }
+
+    @include media-breakpoint-down(xxl) {
+      border-bottom: none;
+    }
+
     background: none;
     color: #fff;
     font-family: inherit;
@@ -31,26 +39,18 @@
     border-radius: 0;
     height: 4rem;
 
-    @include media-breakpoint-up(xxl) {
-      border-right: none;
-    }
-
-    @include media-breakpoint-down(xxl) {
-      border-bottom: none;
-    }
-
     &::placeholder {
       color: #858585;
     }
   }
 
   .button {
-    border-radius: 0;
-    flex-shrink: 0;
-
     @include media-breakpoint-down(xxl) {
       width: 100%;
     }
+
+    border-radius: 0;
+    flex-shrink: 0;
   }
 }
 

src/components/_shared/Popup/Popup.module.scss

@@ -51,13 +51,13 @@
   }
 
   &.horizontalAnchorCenter {
-    right: 0;
-
     @include media-breakpoint-up(md) {
       left: 50%;
       right: auto;
       transform: translateX(-50%);
     }
+
+    right: 0;
   }
 
   &.horizontalAnchorRight {

src/components/_shared/SolidSwiper/Swiper.module.scss

@@ -1,11 +1,11 @@
 :root {
-  --slide-height: 300px;
-  --navigation-reserve: 48px;
-
   @include media-breakpoint-up(md) {
     --slide-height: 500px;
     --navigation-reserve: 56px;
   }
+
+  --slide-height: 300px;
+  --navigation-reserve: 48px;
 }
 
 .Swiper {
@@ -230,16 +230,16 @@
     .body {
       @include font-size(1.7rem);
 
+      @include media-breakpoint-up(md) {
+        // margin-left: calc((100% + 130px) * 0.15);
+        margin-left: calc(15% + 24px);
+      }
+
       margin-top: 24px;
 
       * {
         color: var(--default-color-invert) !important; // Force fix migration errors with inline styles
       }
-
-      @include media-breakpoint-up(md) {
-        // margin-left: calc((100% + 130px) * 0.15);
-        margin-left: calc(15% + 24px);
-      }
     }
   }
 

src/styles/FourOuFour.module.scss

@@ -41,12 +41,6 @@
 }
 
 .errorText {
-  font-weight: 300;
-  left: 52px;
-  margin: 0 60px 1em 0;
-  position: relative;
-  top: -2.25em;
-
   @include font-size(3rem);
 
   @include media-breakpoint-up(sm) {
@@ -55,11 +49,17 @@
     text-align: center;
   }
 
+  font-weight: 300;
+  left: 52px;
+  margin: 0 60px 1em 0;
+  position: relative;
+  top: -2.25em;
+
   .big {
+    @include font-size(7rem);
+
     font-weight: 900;
     letter-spacing: 4px;
-
-    @include font-size(7rem);
   }
 }
 

src/styles/Search.scss

@@ -1,13 +1,13 @@
 .search-form {
-  display: flex;
-  margin-bottom: 2em;
-  margin-top: 2em;
-
   @include media-breakpoint-down(sm) {
     margin-left: divide(-$container-padding-x, 2);
     margin-right: divide(-$container-padding-x, 2);
   }
 
+  display: flex;
+  margin-bottom: 2em;
+  margin-top: 2em;
+
   input,
   button {
     display: block;

src/styles/app.scss

@@ -114,11 +114,6 @@ section {
 }
 
 .wide-container {
-  margin: 0 auto;
-  max-width: 1500px;
-  padding: 0 divide($container-padding-x, 2);
-  width: 100%;
-
   @include media-breakpoint-up(sm) {
     padding: 0 $container-padding-x;
   }
@@ -126,6 +121,11 @@ section {
   @include media-breakpoint-up(xl) {
     padding: 0 $grid-gutter-width;
   }
+
+  margin: 0 auto;
+  max-width: 1500px;
+  padding: 0 divide($container-padding-x, 2);
+  width: 100%;
 }
 
 h1,
@@ -341,6 +341,16 @@ button {
 }
 
 .button--content-index {
+  @include media-breakpoint-up(md) {
+    margin-top: -0.5rem;
+    position: sticky;
+    top: 135px;
+  }
+
+  @include media-breakpoint-up(sm) {
+    right: $container-padding-x;
+  }
+
   background: none;
   border: 2px solid #fff;
   height: 3.2rem;
@@ -352,16 +362,6 @@ button {
   width: 3.2rem;
   z-index: 1;
 
-  @include media-breakpoint-up(md) {
-    margin-top: -0.5rem;
-    position: sticky;
-    top: 135px;
-  }
-
-  @include media-breakpoint-up(sm) {
-    right: $container-padding-x;
-  }
-
   .icon {
     background: #fff;
     transition: filter 0.3s;
@@ -518,26 +518,26 @@ form {
   }
 
   .pretty-form__item--with-button {
-    margin-bottom: 1.6rem;
-
     @include media-breakpoint-up(sm) {
       display: flex;
     }
 
-    input {
+    margin-bottom: 1.6rem;
-      flex: 1;
 
+    input {
       @include media-breakpoint-up(sm) {
         margin-bottom: 0 !important;
       }
+
+      flex: 1;
     }
 
     *:first-child {
-      flex: 1;
-
       @include media-breakpoint-up(sm) {
         margin-right: 1em;
       }
+
+      flex: 1;
     }
   }
 }
@@ -595,10 +595,9 @@ figure {
 .ta-video-container,
 figure {
   figcaption {
-    color: rgb(0 0 0 / 60%);
-
     @include font-size(1.2rem);
 
+    color: rgb(0 0 0 / 60%);
     line-height: 1.5;
   }
 }
@@ -606,6 +605,10 @@ figure {
 .view-switcher {
   @include font-size(1.4rem);
 
+  @include media-breakpoint-up(md) {
+    flex-wrap: wrap;
+  }
+
   display: flex;
   font-weight: 500;
   list-style: none;
@@ -613,20 +616,16 @@ figure {
   overflow: auto;
   padding: 0 1rem;
 
+  li {
     @include media-breakpoint-up(md) {
-    flex-wrap: wrap;
+      margin-right: 2.4rem;
     }
 
-  li {
     display: inline-block;
     margin-right: 2rem;
     margin-bottom: 0.6em;
     white-space: nowrap;
 
-    @include media-breakpoint-up(md) {
-      margin-right: 2.4rem;
-    }
-
     .link {
       border-bottom: none;
     }
@@ -706,15 +705,15 @@ figure {
 }
 
 .view-switcher__search {
-  flex: 1 100%;
-  text-align: right;
-  white-space: nowrap;
-
   @include media-breakpoint-up(sm) {
     flex: 1;
     margin-left: 2em;
   }
 
+  flex: 1 100%;
+  text-align: right;
+  white-space: nowrap;
+
   .icon {
     display: inline-block;
     margin-right: 0.2em;
@@ -762,17 +761,21 @@ figure {
 }
 
 .floor--important {
+  @include media-breakpoint-up(md) {
+    padding-bottom: $grid-gutter-width;
+    padding-top: $grid-gutter-width;
+  }
+
+  @include media-breakpoint-down(md) {
+    margin-bottom: 5rem;
+  }
+
   background: #000;
   color: #fff;
   padding: $grid-gutter-width 0;
   padding-bottom: $container-padding-x;
   padding-top: $container-padding-x;
 
-  @include media-breakpoint-up(md) {
-    padding-bottom: $grid-gutter-width;
-    padding-top: $grid-gutter-width;
-  }
-
   ::selection {
     background: #fff;
     color: #000;
@@ -784,10 +787,6 @@ figure {
     text-align: center;
   }
 
-  @include media-breakpoint-down(md) {
-    margin-bottom: 5rem;
-  }
-
   .all-materials {
     a {
       color: #fff;
@@ -801,18 +800,15 @@ figure {
 }
 
 .short-cards {
-  margin: 0 -5px;
-
   @include media-breakpoint-up(md) {
     display: flex;
     flex-wrap: wrap;
   }
+
+  margin: 0 -5px;
 }
 
 .short-card {
-  margin-bottom: 10px;
-  padding: 0 5px;
-
   @include media-breakpoint-up(md) {
     flex: 1 0 50%;
   }
@@ -820,6 +816,9 @@ figure {
   @include media-breakpoint-up(lg) {
     flex: 1 0 25%;
   }
+
+  margin-bottom: 10px;
+  padding: 0 5px;
 }
 
 .row {
@@ -848,13 +847,13 @@ figure {
 }
 
 .main-content {
-  flex: 1 100%;
-  min-height: 90vh;
-  position: relative;
-
   @include media-breakpoint-up(lg) {
     // padding-top: 130px;
   }
+
+  flex: 1 100%;
+  min-height: 90vh;
+  position: relative;
 }
 
 .main-content--no-padding {
@@ -863,20 +862,17 @@ figure {
 }
 
 .container {
-  max-width: 1500px;
-  width: auto;
-
   @include media-breakpoint-down(sm) {
     // padding: 0 $container-padding-x * 0.5;
   }
+
+  max-width: 1500px;
+  width: auto;
 }
 
 .container--static-page {
   @include font-size(1.7rem);
 
-  color: #404040;
-  position: relative;
-
   @include media-breakpoint-up(md) {
     padding-top: 1.5em;
 
@@ -887,14 +883,15 @@ figure {
     }
   }
 
+  color: #404040;
+  position: relative;
+
   .order-md-last {
     padding-right: 0;
   }
 }
 
 .shift-content {
-  position: relative;
-
   @include media-breakpoint-up(md) {
     margin-left: 161px;
   }
@@ -903,6 +900,8 @@ figure {
     margin-left: 235px;
   }
 
+  position: relative;
+
   .left-navigation {
     position: sticky;
     top: 0;
@@ -933,14 +932,14 @@ figure {
 .content-index {
   @include font-size(1.4rem);
 
-  line-height: 1.4;
-  margin: 0 3.6rem 2em 0;
-
   @include media-breakpoint-up(md) {
     position: sticky;
     top: 14rem;
   }
 
+  line-height: 1.4;
+  margin: 0 3.6rem 2em 0;
+
   ul ul {
     margin: 1em 0 0 1em;
   }
@@ -967,12 +966,12 @@ figure {
 }
 
 details {
-  margin-bottom: 1.5em;
-
   @include media-breakpoint-down(md) {
     padding-left: 3rem;
   }
 
+  margin-bottom: 1.5em;
+
   summary {
     display: block;
     position: relative;