background texte article impaire

components/Common/Article.vue

@@ -8,7 +8,7 @@
     <v-img max-width="350" :src="article.image" :alt="article.imageAlt" />
   </v-col>
 
-  <v-col cols="12" md="6">
+  <v-col cols="12" md="6" class="txt_article">
     <h3>{{ article.title }}</h3>
     <p>{{ article.text }}</p>
     <v-btn max-width="510px" :href="article.btnHref" target="_blank">

components/Partnerships/Partners.vue

@@ -13,7 +13,7 @@ Section "Bénéfices" de la page du nos partenaires
       <v-row
         v-for="(article, index) in articles"
         :key="index"
-        class="center-90 benefits"
+        class="center-90 benefits-block"
       >
         <CommonArticle :article="article" :picture-right="index % 2 === 0" />
       </v-row>
@@ -62,7 +62,39 @@ const articles: Ref<Array<Article>> = ref([
   justify-content: center;
   align-items: center;
 }
-.benefits:not(:last-child) {
-  margin-bottom: 80px;
+.benefits-block {
+  display: flex;
+  align-self: center;
+  :deep(.txt_article){
+    padding-top:80px;
+    padding-bottom:80px;
+    padding-left:80px;
+    padding-right:80px;
+  }
+}
+
+.benefits-block:nth-child(odd)
+{
+  :deep(.txt_article){
+    background: var(--neutral-color-alt-light);
+    padding-left:80px;
+    padding-right:80px;
+  }
 }
+
+
+@media (max-width: 960px) {
+  .benefits-block {
+    padding-top: 40px;
+    padding-bottom: 40px;
+  }
+
+  .benefits-block:nth-child(odd)
+  {
+    :deep(.txt_article){
+      padding:30px;
+    }
+  }
+}
+
 </style>