feat [front]: arrange prettily cards

front/components/movieCard/short.vue

@@ -130,7 +130,6 @@ const headerTags = computed<{ label?: string; value: string }[]>(() =>
 .movie-card
   .movie-card-header.button
     height: fit-content
-  width: 468px
   .poster-container
     width: 152px
   footer.card-content

front/pages/index.vue

@@ -5,7 +5,13 @@
   </section>
   <section v-if="nextFilms.length" class="section">
     <h2 class="title">Et après</h2>
-    <swiper class="w-5/6 ml-auto relative" :loadtheme="false">
+    <swiper
+      class="w-5/6 ml-auto relative"
+      :loadtheme="false"
+      slides-per-view="auto"
+      :space-between="52"
+      center-insufficient-slides
+    >
       <swiper-slide v-for="film of nextFilms" :key="film.id">
         <MovieCardShort :film="film" class="block" />
       </swiper-slide>
@@ -23,3 +29,8 @@ films.value = (await apiGet<Film[]>(`films/`)).data.value
 const firstFilm = computed(() => films.value[0])
 const nextFilms = computed(() => films.value.slice(1))
 </script>
+
+<style lang="sass">
+.swiper-slide
+  width: 468px
+</style>