Some css reorganization

src/assets/css/librarybrowser.scss

@@ -619,11 +619,11 @@
         padding-right: 32.45vw;
         padding-left: 2%;
     }
-}
 
-.layout-mobile .detailPageContent {
+    .layout-mobile & {
         padding-left: 5%;
         padding-right: 5%;
+    }
 }
 
 .detailSectionContent a {
@@ -747,12 +747,8 @@
     text-align: center !important;
 }
 
-.layout-mobile .mainDetailButtons {
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-}
-
-.layout-mobile [dir="ltr"] .mainDetailButtons {
+.mainDetailButtons {
+    .layout-mobile [dir="ltr"] & {
         margin-left: 0;
 
         @include header-poster-padding;
@@ -762,9 +758,9 @@
             margin-bottom: 0;
             padding-left: 0;
         }
-}
+    }
 
-.layout-mobile [dir="rtl"] .mainDetailButtons {
+    .layout-mobile [dir="rtl"] & {
         margin-right: 0;
 
         @include header-poster-padding-rtl;
@@ -773,6 +769,12 @@
             margin-bottom: 0;
             padding-right: 0;
         }
+    }
+
+    .layout-mobile & {
+        margin-top: 1em;
+        margin-bottom: 0.5em;
+    }
 }
 
 .subtitle {
@@ -794,6 +796,16 @@
     align-content: center;
     z-index: 2;
 
+    .layout-desktop [dir="rtl"] &,
+    .layout-tv [dir="rtl"] & {
+        padding-right: 32.45vw;
+    }
+
+    .layout-desktop [dir="ltr"] &,
+    .layout-tv [dir="ltr"] & {
+        padding-left: 32.45vw;
+    }
+
     .layout-mobile & {
         display: block;
         position: relative;
@@ -809,22 +821,6 @@
     }
 }
 
-.layout-desktop [dir="rtl"] .detailPagePrimaryContainer {
-    padding-right: 32.45vw;
-}
-
-.layout-desktop [dir="ltr"] .detailPagePrimaryContainer {
-    padding-left: 32.45vw;
-}
-
-.layout-tv [dir="rtl"] .detailPagePrimaryContainer {
-    padding-right: 32.45vw;
-}
-
-.layout-tv [dir="ltr"] .detailPagePrimaryContainer {
-    padding-left: 32.45vw;
-}
-
 .layout-desktop .detailRibbon {
     margin-top: -7.2em;
     height: 7.2em;
@@ -839,20 +835,20 @@
     min-width: 0;
     max-width: 100%;
     flex: 1 0 0;
-}
 
-.layout-mobile .infoWrapper {
+    .layout-mobile [dir="ltr"] & {
+        @include header-poster-padding;
+    }
+
+    .layout-mobile [dir="rtl"] & {
+        @include header-poster-padding-rtl;
+    }
+
+    .layout-mobile & {
         @media all and (max-width: 32em) {
             position: relative;
         }
-}
-
-.layout-mobile [dir="ltr"] .infoWrapper {
-    @include header-poster-padding;
-}
-
-.layout-mobile [dir="rtl"] .infoWrapper {
-    @include header-poster-padding-rtl;
+    }
 }
 
 .infoText {