fix the experts

src/assets/styles/blocks/experts.styl

@@ -2,53 +2,69 @@
   display flex
   background-color #F7F2E2
   padding 144px 135px
-  justify-content space-between
+  justify-content space-between 
+  position relative
+  z-index 1
 
-  &__arrows
-    display flex
-
-  &__arrow_back
-    height 48px
-    width 48px
-    border-radius 100%
-    border none
+  &__shape
+    z-index 0
+    position absolute
+    width 176px
+    height 176px
+    left 550px
+    bottom 100px 
+    object-position left top
+    object-fit cover
+    margin 0
+    padding 0
 
-  &__arrow_forward
-    height 48px
-    width 48px
-    border-radius 100%
-    border none
+  &__subtitle
+    font-size 18px
+    line-height 32px
+    font-weight 700
+    margin 0
+    text-align left
+    padding-bottom 18px
 
-  &__arrow_right
-    margin-right 8px
+  &__text
+    margin-top 106px
 
+  &__title
+    font-size 56px
+    line-height 64px
+    font-weight 800
+    margin 0
+    padding 0
+    padding-bottom 36px
+    text-align left
+  
   &__cards
     display flex
     flex-direction row
 
-  &__card
-    width 370px
-    height 592px
-    padding-bottom -50px
-    position relative
-    z-index 1
-    object-fit cover
-    border-radius 20px
+.ex-card   
+  width 370px
+  height 592px
+  object-fit contain
+  border-radius 20px
+  
+  &--right
+    margin-right 30px
 
-  &__card_figcaption
+  &__figcaption
     width 370px
     height 160px
     background-color white
     border-radius 20px
     justify-content center
-    margin-top -160px
+    margin-top -187px
     position relative
     z-index 1
 
-  &__card_right
-    margin-right 30px
+    &--right
+      margin-top -60px
 
-  &__card_subtitle
+  &__subtitle
     font-size 16px
     line-height 32px
     font-weight 400
@@ -56,7 +72,7 @@
     margin 19px 32px 36px
     color #333333
 
-  &__card_title
+  &__title
     margin-top 40px
     margin-right 167px
     margin-left 32px
@@ -66,34 +82,25 @@
     line-height 32px
     font-weight 700
 
-  &__shape
-    z-index 1
-    position absolute
-    width 176px
-    height 176px
-    left 550px
-    top 3830px
-    object-position left top
-    object-fit cover
-    margin 0
-    padding 0
+.arrows
+  display flex
+  margin-top 48px
+  justify-content center
 
-  &__subtitle
-    font-size 18px
-    line-height 32px
-    font-weight 700
-    margin 0
-    text-align left
-    padding-bottom 18px
+  &--left
+    justify-content flex-start
 
-  &__text
-    margin-top 106px
+  &__back
+    height 48px
+    width 48px
+    border-radius 100%
+    border none
 
-  &__title
-    font-size 56px
-    line-height 64px
-    font-weight 800
-    margin 0
-    padding 0
-    padding-bottom 36px
-    text-align left
+    &--right
+      margin-right 8px
+
+  &__forward
+    height 48px
+    width 48px
+    border-radius 100%
+    border none

src/templates/blocks/experts/experts.pug

@@ -8,22 +8,22 @@ mixin experts()
         | passionate
         br
         | crew
-      +e.nav.arrows
-        +e.button.arrow_back.arrow_right(type='submit')
+      +b.NAV.arrows--left
+        +e.BUTTON.back.--right(type='submit')
           IMG(src='../../../assets/images/service/back.svg' alt='back')
-        +e.button.arrow_forward(type='submit')
+        +e.BUTTON.forward(type='submit')
           IMG(src='../../../assets/images/service/forward.svg' alt='forward')
     +e.cards
-      div
-        +e.IMG.card.card_right(src='../../../assets/images/experts/Tamas.png' alt='Tamas Bunce')
-        +e.IMG.shape(src='../../../assets/images/experts/shape.svg' alt='shape')
+      +b.ex-card.--right
+        +e.IMG(src='../../../assets/images/experts/Tamas.png' alt='Tamas Bunce')
         div
-          +e.card_figcaption
-            +e.H2.card_title Tamas Bunce
-            +e.H3.card_subtitle Architect Designer
-      div
-        +e.IMG.card(src='../../../assets/images/experts/Jafaris.png' alt='Jafaris Long')
+          +e.figcaption
+            +e.H2.title Tamas Bunce
+            +e.H3.subtitle Architect Designer
+      +b.ex-card
+        +e.IMG(src='../../../assets/images/experts/Jafaris.png' alt='Jafaris Long')
         div
-          +e.card_figcaption
-            +e.H2.card_title Jafaris Long
-            +e.H3.card_subtitle Architect Designer
+          +e.figcaption.--right
+            +e.H2.title Jafaris Long
+            +e.H3.subtitle Architect Designer
+    +e.IMG.shape(src='../../../assets/images/experts/shape.svg' alt='shape')