Replace block current class and import CSS files for blocks

components/slices/MultipleBlock.vue

@@ -1,35 +1,35 @@
 <template>
-  <section class="block" :style="[background]">
+  <section :class="blockClass" :style="[background]">
     <prismic-rich-text
       v-if="hasTitle && shouldDisplayTitle"
-      class="block__title"
+      :class="`${blockClass}__title`"
       :field="title"
     />
     <prismic-rich-text v-else class="sr-only" :field="title" />
     <prismic-rich-text
       v-if="shouldUseSubtitle && hasSubtitle"
-      class="block__subtitle"
+      :class="`${blockClass}__subtitle`"
       :field="subtitle"
     />
-    <div class="block__wrapper">
+    <div :class="`${blockClass}__wrapper`">
       <div
         v-for="(itemsByRow, rowIndex) in rows"
         :key="`row-${rowIndex}`"
-        class="block-wrapper__row"
+        :class="`${blockClass}-wrapper__row`"
       >
         <div
           v-for="(item, itemIndex) in itemsByRow"
           :key="`item-${itemIndex}`"
-          class="block-wrapper__item"
+          :class="`${blockClass}-wrapper__item`"
         >
           <pix-image v-if="hasImage(item)" :field="item.item_image" />
           <div>
             <prismic-rich-text
-              class="block-wrapper-item__title"
+              :class="`${blockClass}-wrapper-item__title`"
               :field="item.item_title"
             />
             <prismic-rich-text
-              class="block-wrapper-item__description"
+              :class="`${blockClass}-wrapper-item__description`"
               :field="item.item_description"
             />
           </div>
@@ -64,6 +64,9 @@ export default {
         backgroundColor: `${this.slice.primary.block_background_color}`,
       }
     },
+    blockClass() {
+      return this.slice.primary.block_style
+    },
     items() {
       return this.slice.items
     },
@@ -136,3 +139,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+@import '../../styles/components/slices/features';
+@import '../../styles/components/slices/process';
+@import '../../styles/components/slices/statistics';
+</style>

styles/components/slices/features.scss

@@ -0,0 +1,179 @@
+.features {
+  &__title h2 {
+    font-size: 2.125rem;
+    font-weight: normal;
+    height: 49px;
+    letter-spacing: 0.15px;
+    line-height: 49px;
+    text-align: center;
+    margin-top: 64px;
+  }
+
+  &__wrapper {
+    padding: 64px 0;
+  }
+}
+
+.features-wrapper {
+  &__row {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 24px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24px;
+
+    &:last-child {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+
+    img {
+      margin-right: 25px;
+      height: 62px;
+      width: 55px;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+}
+
+.features-wrapper-item {
+    &__title h1 {
+      width: 217px;
+      color: $grey-1;
+      font-size: 1rem;
+      letter-spacing: 0;
+      line-height: 30px;
+      font-weight: 600;
+      margin-top: 0;
+    }
+
+    &__description {
+      width: 217px;
+      color: $grey-10;
+      font-size: 0.875rem;
+      letter-spacing: 0.15px;
+      line-height: 24px;
+    }
+}
+
+@include device-is('tablet') {
+  .features {
+    &__title h2 {
+      margin-top: 80px;
+    }
+    &__wrapper {
+      padding: 80px 0;
+    }
+  }
+
+  .features-wrapper {
+    &__item {
+      margin-bottom: 40px;
+
+      img {
+        margin-right: 32px;
+        height: 73px;
+        width: 65px;
+      }
+    }
+  }
+
+  .features-wrapper-item {
+    &__title h1 {
+      width: 518px;
+      font-size: 1.25rem;
+    }
+
+    &__description {
+      width: 518px;
+    }
+  }
+}
+
+@include device-is('desktop') {
+  .features {
+    &__title h2 {
+      margin-top: 80px;
+    }
+
+    &__wrapper {
+      padding: 80px 0 84px;
+    }
+  }
+
+  .features-wrapper {
+    &__row {
+      flex-direction: row;
+      justify-content: center;
+      align-items: baseline;
+    }
+
+    &__item {
+      display: block;
+      margin-right: 98px;
+      text-align: center;
+
+      img {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .features-wrapper-item {
+    &__title h1 {
+      width: 200px;
+      font-size: 1.25rem;
+    }
+
+    &__description {
+      margin-top: 8px;
+      width: 200px;
+    }
+  }
+}
+
+@include device-is('large-screen') {
+  .features {
+    &__title h2 {
+      margin-top: 120px;
+    }
+    &__wrapper {
+      padding: 60px 0;
+    }
+  }
+
+  .features-wrapper {
+    &__item {
+      margin-right: 76px;
+      text-align: center;
+
+      img {
+        height: 73px;
+        width: 65px;
+      }
+    }
+  }
+
+  .features-wrapper-item {
+    &__title h1 {
+      width: 294px;
+    }
+
+    &__description {
+      width: 294px;
+    }
+  }
+}