Full article gallery style fixes

src/components/Article/FullArticle.tsx

@@ -175,9 +175,6 @@ export const FullArticle = (props: ArticleProps) => {
                 </div>
               </Show>
             </Show>
-            <Show when={props.article.layout === 'image'}>
-              <SolidSwiper images={media()} />
-            </Show>
             <Show when={media() && props.article.layout === 'video'}>
               <div class="media-items">
                 <For each={media() || []}>
@@ -203,6 +200,18 @@ export const FullArticle = (props: ArticleProps) => {
         </div>
       </div>
 
+      <Show when={props.article.layout === 'image'}>
+        <div class="floor floor--important">
+          <div class="wide-container">
+            <div class="row">
+              <div class="col-md-20 offset-md-2">
+                <SolidSwiper images={media()} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Show>
+
       <div class="wide-container">
         <div class="row">
           <div class="col-md-16 offset-md-5">

src/components/_shared/SolidSwiper/SolidSwiper.tsx

@@ -156,6 +156,7 @@ export const SolidSwiper = (props: Props) => {
               thumbs-swiper={'.thumbSwiper'}
               observer={true}
               onSlideChange={handleSlideChange}
+              space-between={20}
             >
               <For each={props.images}>
                 {(slide, index) => (
@@ -322,7 +323,7 @@ export const SolidSwiper = (props: Props) => {
                 })}
                 onClick={() => thumbSwipeRef.current.swiper.slidePrev()}
               >
-                <Icon iconClassName={styles.icon} name="swiper-l-arr" class={styles.icon} />
+                <Icon name="swiper-l-arr" class={styles.icon} />
               </div>
               <div
                 class={clsx(styles.navigation, styles.thumbsNav, styles.next, {
@@ -330,7 +331,7 @@ export const SolidSwiper = (props: Props) => {
                 })}
                 onClick={() => thumbSwipeRef.current.swiper.slideNext()}
               >
-                <Icon name="swiper-r-arr" iconClassName={styles.icon} class={styles.icon} />
+                <Icon name="swiper-r-arr" class={styles.icon} />
               </div>
             </div>
           </div>

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

@@ -1,5 +1,12 @@
 $navigation-reserve: 32px;
-$slide-height: 500px;
+
+:root {
+  --slide-height: 300px;
+
+  @include media-breakpoint-up(md) {
+    --slide-height: 500px;
+  }
+}
 
 .Swiper {
   display: block;
@@ -14,26 +21,23 @@ $slide-height: 500px;
 
     .container {
       margin: auto;
-      max-width: 800px;
+      //max-width: 800px;
       position: relative;
       padding: 24px 0;
       display: flex;
       justify-content: center;
       gap: 20px;
-
-      .holder {
-        width: 600px;
-      }
+      width: 100%;
 
       .thumbsHolder {
-        width: unset;
+        width: auto;
       }
 
       .thumbs {
         padding: 52px 0;
         width: 110px;
         overflow: hidden;
-        height: $slide-height + 40px;
+        height: calc(var(--slide-height) + 40px);
         box-sizing: border-box;
         margin: 0;
         position: relative;
@@ -56,7 +60,7 @@ $slide-height: 500px;
           right: 0;
 
           .icon {
-            transform: rotate(45deg);
+            transform: rotate(90deg);
           }
 
           &.prev {
@@ -64,7 +68,7 @@ $slide-height: 500px;
           }
 
           &.next {
-            top: unset;
+            top: auto;
             bottom: 0;
           }
         }
@@ -98,16 +102,15 @@ $slide-height: 500px;
   .holder {
     position: relative;
     box-sizing: border-box;
-    padding: 0 $navigation-reserve;
     overflow: hidden;
+    width: calc(100% - 130px);
 
     .counter {
       @include font-size(1.2rem);
-
       position: absolute;
       z-index: 2;
-      top: 476px;
-      right: $navigation-reserve;
+      top: 477px;
+      right: 0;
       font-weight: 600;
       padding: 0.2rem 0.8rem;
       color: var(--background-color);
@@ -118,7 +121,7 @@ $slide-height: 500px;
       display: flex;
       align-items: center;
       justify-content: center;
-      height: $slide-height;
+      height: var(--slide-height);
       background: var(--placeholder-color-semi);
       position: relative;
 
@@ -133,15 +136,17 @@ $slide-height: 500px;
   }
 
   .navigation {
+    background: rgb(0 0 0 / 40%);
     display: flex;
     position: absolute;
     top: 0;
     bottom: 0;
     justify-content: center;
     align-items: center;
-    width: $navigation-reserve;
     cursor: pointer;
-    height: $slide-height;
+    height: var(--slide-height);
+    width: 52px;
+    z-index: 2;
 
     &.disabled {
       opacity: 0.5;
@@ -163,39 +168,46 @@ $slide-height: 500px;
     }
 
     &:not(.disabled):hover .icon {
-      scale: 1.1;
+      opacity: 0.6;
     }
   }
 
   &.articleMode .navigation {
-    filter: invert(1);
+    .icon {
+      filter: invert(1);
+    }
   }
 
   .slideDescription {
     margin-top: 8px;
+
     .articleTitle {
       @include font-size(1.4rem);
     }
 
     .source {
       @include font-size(1.2rem);
-
       color: var(--secondary-color);
     }
+
     .body {
       @include font-size(1.7rem);
-
       margin-top: 24px;
+
+      @include media-breakpoint-up(md) {
+        //margin-left: calc((100% + 130px) * 0.15);
+        margin-left: calc(15% + 24px);
+      }
     }
   }
 
   .thumbs {
     margin: 3rem 0;
-    max-height: 488px;
+    max-height: var(--slide-height);
     position: relative;
 
     .navigation {
-      height: unset;
+      height: auto;
 
       &.prev {
         left: -$navigation-reserve;
@@ -260,7 +272,7 @@ $slide-height: 500px;
       &:hover {
         opacity: 1;
         cursor: pointer;
-        filter: unset;
+        filter: none;
 
         .thumbAction {
           display: flex;
@@ -309,12 +321,16 @@ $slide-height: 500px;
       }
     }
   }
+
+  :global(.swiper-lazy-preloader) {
+    top: calc(var(--slide-height) / 2);
+  }
 }
 
 :global(.swiper-slide-thumb-active) {
   .imageThumb {
     opacity: 1 !important;
-    filter: unset !important;
+    filter: none !important;
 
     .thumbAction {
       display: flex !important;