correction v3

components/Home/Solution.vue

@@ -19,6 +19,7 @@
         class="col-info"
       >
         <v-container>
+          <div class="d-flex justify-center align-left flex-column">
             <small class="opentalent-small">Opentalent</small>
             <h2 class="logiciel-name">
               {{ solution.name }}
@@ -39,7 +40,7 @@
               </v-row>
             </nuxt-link>
 
-            <v-row justify="center">
+            <v-row>
               <div class="list-container">
                 <v-col cols="6">
                   <ul class="list-solutions">
@@ -62,11 +63,19 @@
                       {{ sol }}
                     </li>
                   </ul>
-   
                 </v-col>
-                
               </div>
             </v-row>
+
+            <v-row>
+              <v-col cols="12" lg="4" md="4" sm="4"
+              >
+                <p style="font-size: 0.7rem; text-align: left !important;">
+                  {{ solution.option }}
+                </p></v-col
+              >
+            </v-row>
+          </div>
         </v-container>
       </v-col>
     </v-row>
@@ -105,7 +114,6 @@ const solutions = [
       "Site internet intégré",
       "Partage de données en réseau",
     ],
-    option: "* en option",
   },
   {
     name: "School",
@@ -123,6 +131,8 @@ const solutions = [
       "Site internet intégré",
       "Statistiques",
     ],
+
+    option: "* en option",
   },
   {
     name: "Manager",
@@ -148,7 +158,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-
 .row-custom {
   width: 90%;
   margin-right: auto;
@@ -285,19 +294,13 @@ onMounted(() => {
   width: 20rem;
 }
 
-.opentalent-container {
-  text-align: left;
-  margin-left: 1rem;
-}
 .icon-title {
   margin-top: 1rem;
   color: #ffffff;
 }
 
-
-
 .details-solution {
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   width: 10rem;
   margin-left: 1rem;
   font-family: "Barlow";