[yoga-12] serviceList page improvements - improve block with right image - cleanup with gemini

yoga-app/src/styles/block-with-right-image.scss

@@ -4,54 +4,54 @@
   --y-block-with-right-image-spacing-image: 96px;
   --y-block-with-image-spacing-main: 66px;
   --y-block-with-right-image-top-spacing: 150px;
+  --y-box-border-radius: 200px;
+  --y-btn-font-size: 22px;
+  --y-btn-padding: 24px 44px;
 
   padding: 130px 0 45px;
   position: relative;
 
-}
+  &_image img {
-
-.block_with_right_image_image img{
     max-width: 50%;
     border-top-left-radius: 200px;
     border-bottom-right-radius: 200px;
     margin: calc(-1 * var(--y-block-with-right-image-top-spacing)) 0 12px 12px;
   }
 
-.block_with_right_image .block_with_image_box {
+  .block_with_image_box {
     width: 100%;
     background-color: var(--e-global-color-white);
-  border-radius: 200px 0 200px 0;
+    border-radius: var(--y-box-border-radius) 0 var(--y-box-border-radius) 0;
     box-shadow: 1px 1px 50px rgb(0 0 0 / 7%);
   }
 
-.block_with_right_image_content {
+  &_content {
     padding-top: var(--y-block-with-right-image-top-spacing);
     padding-left: 96px;
-}
 
-.block_with_right_image_content h5 {
+    h5 {
       text-transform: uppercase;
       color: var(--e-global-color-secondary);
       letter-spacing: 3.1px;
       margin-bottom: 12px;
     }
 
-.block_with_right_image_content h2 {
+    h2 {
       margin-bottom: 16px;
       color: var(--e-global-color-primary);
     }
 
-.block_with_right_image_content p {
+    p {
       margin-bottom: 32px;
       color: var(--e-global-color-text);
       padding-right: 25px;
     }
 
-.block_with_right_image_content .btn_wrapper .read_more_btn {
+    .btn_wrapper .read_more_btn {
-  font-size: 22px;
+      font-size: var(--y-btn-font-size);
-  line-height: 22px;
+      line-height: var(--y-btn-font-size);
       font-weight: 500;
-  padding: 24px 44px;
+      padding: var(--y-btn-padding);
       text-align: center;
       color: var(--e-global-color-white);
       display: inline-block;
@@ -60,21 +60,20 @@
       transition: all 0.3s ease-in-out;
       position: relative;
       overflow: hidden;
-}
 
-.block_with_right_image_content .btn_wrapper .read_more_btn:hover {
+      &:hover {
         color: var(--e-global-color-accent);
         background-color: var(--e-global-color-soft-orange);
         transform: translateY(-10px);
-}
 
-.block_with_right_image_content .btn_wrapper .read_more_btn:hover:before {
+        &::before {
           left: 0%;
           right: auto;
           width: 100%;
         }
+      }
 
-.block_with_right_image_content .btn_wrapper .read_more_btn:before {
+      &::before {
         display: block;
         position: absolute;
         top: 0px;
@@ -87,165 +86,124 @@
         background-color: var(--e-global-color-soft-orange);
         transition: all 0.4s cubic-bezier(0.12, 0, 0.38, 1) 0s;
       }
-
-.block_with_right_image .block_with_right_image_right_shape {
-  position: absolute;
-  top: 210px;
-  right: 0;
     }
 
-.block_with_right_image_content {
     p, h1, h2, h3, h4, h5 {
       padding-right: var(--y-block-with-right-image-spacing-image);
       padding-left: 0;
     }
   }
 
+  &_right_shape {
+    position: absolute;
+    top: 210px;
+    right: 0;
+  }
 
   @media screen and (max-width: 1440px) {
-  .block_with_right_image_content {
+    &_right_shape {
-    padding-top: var(--y-block-with-right-image-top-spacing);
-  }
-
-  .block_with_right_image_section .block_with_right_image_right_shape {
       top: 15px;
-  }
+      img {
-  .block_with_right_image_section .block_with_right_image_right_shape img {
         width: 90px;
       }
-  .block_with_right_image_image img{
+    }
+    &_image img {
       margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
     }
   }
 
   @media screen and (max-width: 1199px) {
-  .block_with_right_image_section {
     --y-block-with-right-image-top-spacing: 135px;
+    --y-btn-font-size: 20px;
+    --y-btn-padding: 22px 40px;
     padding: 100px 0 50px;
-  }
 
-  .block_with_right_image_content {
+    &_content {
-    padding-top: var(--y-block-with-right-image-top-spacing);
       padding-left: 70px;
-  }
+      h5 {
-  .block_with_right_image_content h5 {
         margin-bottom: 8px;
       }
-  .block_with_right_image_content h2 {
+      h2 {
         margin-bottom: 12px;
       }
-  .block_with_right_image_content p {
+      p {
         margin-bottom: 28px;
         padding-right: 18px;
       }
-  .block_with_right_image_content .btn_wrapper .read_more_btn {
-    font-size: 20px;
-    line-height: 20px;
-    padding: 22px 40px;
     }
-  .block_with_right_image_section .block_with_right_image_right_shape {
+    &_right_shape {
       display: none;
     }
-
+    &_image img {
-  .block_with_right_image_image img{
       margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
     }
   }
 
   @media screen and (max-width: 991px) {
-  .block_with_right_image_section {
     --y-block-with-right-image-top-spacing: 70px;
-
+    --y-box-border-radius: 140px;
+    --y-btn-font-size: 18px;
+    --y-btn-padding: 20px 35px;
     padding: 70px 0 35px;
-  }
-  .block_with_right_image_section .block_with_image_box {
-    border-radius: 140px 0 140px 0;
-  }
-  .block_with_right_image_content {
-    padding-top: var(--y-block-with-right-image-top-spacing);
 
+    &_content {
       padding-left: 45px;
-  }
+      h5 {
-  .block_with_right_image_content h5 {
         margin-bottom: 5px;
       }
-  .block_with_right_image_content h2 {
+      h2 {
         margin-bottom: 10px;
       }
-  .block_with_right_image_content p {
+      p {
         margin-bottom: 22px;
         padding-right: 0px;
       }
-  .block_with_right_image_content .btn_wrapper .read_more_btn {
-    font-size: 18px;
-    line-height: 18px;
-    padding: 20px 35px;
     }
-
+    &_image img {
-  .block_with_right_image_image img{
       margin-top: calc(-1 * var(--y-block-with-right-image-top-spacing));
     }
-
   }
 
   @media screen and (max-width: 767px) {
-  .block_with_right_image_section {
     --y-block-with-right-image-top-spacing: 60px;
+    --y-box-border-radius: 185px;
+    --y-btn-font-size: 16px;
+    --y-btn-padding: 18px 32px;
     padding: 60px 0 30px;
-  }
+
-  .block_with_right_image_section .block_with_image_box {
+    &_content {
-    border-radius: 185px 0 185px 0;
-  }
-  .block_with_right_image_content {
-    padding-top: var(--y-block-with-right-image-top-spacing);
       padding-left: 0;
       text-align: center;
       margin-bottom: 30px;
-  }
+      h2 {
-  .block_with_right_image_content h2 {
         margin-bottom: 8px;
       }
-  .block_with_right_image_content p {
+      p {
         margin-bottom: 18px;
         padding: 0 50px;
       }
-  .block_with_right_image_content .btn_wrapper .read_more_btn {
-    font-size: 16px;
-    line-height: 16px;
-    padding: 18px 32px;
     }
-
+    &_image img {
-  .block_with_right_image_image img{
       margin-top: 0;
       max-width: 100%;
     }
   }
 
   @media screen and (max-width: 575px) {
-
-  .block_with_right_image_section {
     --y-block-with-right-image-top-spacing: 50px;
-  }
+    --y-box-border-radius: 118px;
+    --y-btn-font-size: 14px;
+    --y-btn-padding: 16px 30px;
 
-  .block_with_right_image_section .block_with_image_box {
+    &_content {
-    border-radius: 118px 0 118px 0;
+      p {
-  }
-  .block_with_right_image_content {
-    padding-top: var(--y-block-with-right-image-top-spacing);
-  }
-  .block_with_right_image_content p {
         margin-bottom: 15px;
         padding: 0 10px;
       }
-  .block_with_right_image_content .btn_wrapper .read_more_btn {
-    font-size: 14px;
-    line-height: 14px;
-    padding: 16px 30px;
     }
-
+    &_image img {
-  .block_with_right_image_image img{
       margin-top: 0;
       max-width: 100%;
     }
-
+  }
 }