fix: swiper

index.hbs

@@ -91,11 +91,11 @@ into the {body} of the default.hbs template --}}
                         {{!-- <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
                           {{title}}
                         </h2> --}}
-                        <div class="m-featured-article__timestamp">
+                        {{!-- <div class="m-featured-article__timestamp">
                           <span>{{date published_at}}</span>
                           <span> </span>
                           <span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
-                        </div>
+                        </div> --}}
                       </a>
                     </article>
                   </div>

src/sass/components/articles/_featured-slider.scss

@@ -1,53 +1,52 @@
 .m-featured-slider.swiper {
     position: relative;
     overflow: hidden !important;
-    height: calc(100vw * 9 / 16);
+    height: 350px;
     margin: -40px -#{$mobile-space} 40px;
     @include transition(all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1));
-    @include bs(var(--article-shadow-normal));
-
+
     &:hover {
-        @include respond-to('medium') {
-            @include transform(translateY(-5px));
-            @include bs(var(--article-shadow-hover));
-        }
+      @include respond-to("medium") {
+        @include transform(translateY(-5px));
+        @include bs(var(--article-shadow-hover));
+      }
     }
-
-    @include respond-to('medium') {
-        width: calc(420px * 16 / 9);
-        height: 420px;
-        margin: -40px 10px 20px 10px;
-        border-radius: 10px;
+  
+    @include respond-to("medium") {
+      width: 100%;
+      height: 420px;
+      margin: -40px 10px 20px 10px;
+      border-radius: 10px;
     }
-
-    @include respond-to('large') {
-        width: calc(420px * 16 / 9);
-        margin: 0 20px 40px 20px;
-        overflow: unset;
+  
+    @include respond-to("large") {
+      width: calc(100% - (100% / 3) - 40px);
+      margin: 0 20px 40px 20px;
+      overflow: unset;
     }
-}
-
-.m-featured-slider:not(:root:root) {
+  }
+  
+  .m-featured-slider:not(:root:root) {
     overflow: hidden !important;
-}
-
-.m-featured-slider__list {
+  }
+  
+  .m-featured-slider__list {
     list-style-type: none;
     padding: 0;
     margin: 0;
     height: 100%;
-
-    @include respond-to('medium') {
-        border-radius: 10px;
-        overflow: hidden;
+
+    @include respond-to("medium") {
+      border-radius: 10px;
     }
-}
-
-.m-featured-slider__list__item {
+  }
+  
+  .m-featured-slider__list__item {
     height: 100%;
     overflow: hidden;
-
-    @include respond-to('medium') {
-        border-radius: 10px;
+  
+    @include respond-to("medium") {
+      border-radius: 10px;
     }
-}
+  }
+