updated the new inner banner at resource detail page

blocks/custom-banner-with-right-image.php

 <?php if(get_field('enable_section')):?>
-<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION">
+<!-- 
+if(absolute image){
+$(section).addClass(".inner-banner-absolute-image)
+}  
+-->
+<section class="background-dark pb-60 ABOUT TOP-BANNER-SECTION inner-banner-absolute-image">
   <div class="container">
-    <div class="row align-items-center justify-content-between">
-      <div class="col-lg-6 col-12">
-        <div class="position-relative left-text-wrapper">
-          <?php the_field('description');?>
+    <div class="inner-banner-wrapper">
+      <div class="row align-items-center justify-content-between">
+        <div class="col-lg-6 col-12">
+          <div class="position-relative left-text-wrapper">
+            <?php the_field('description');?>
+
+            <a href="#"
+              class="btn btn-primary btn-padding hover-up btn-start-project font-14 fw-500 btn-padding btn-submit">Download
+              Now [PDF]</a>
+          </div>
         </div>
-      </div>
-      <div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
-        <!--<?php if($image = get_field('image')): echo wp_get_attachment_image($image); endif;?>-->
+        <div class="col-lg-5 col-md-5 mx-auto col-12 text-center right-image">
+          <div class="image-wrapper">
+            <div class="image">
+              <!--<?php if($image = get_field('image')): echo wp_get_attachment_image($image); endif;?>-->
 
-        <?php
+              <?php
                         $image = get_field('image');
                         $size = 'full';
                         if ($image) {
                             echo wp_get_attachment_image($image, $size);
                         } ?>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

dev/sass/base/_base.scss

@@ -93,6 +93,9 @@ p {
 	font-size: 1.125rem;
 	color: #58595a;
 	letter-spacing: -0.5px;
+	@media (max-width: 991px) {
+		letter-spacing: 0;
+	}
 }
 
 ul {

dev/sass/base/_makura-new.scss

@@ -14,6 +14,7 @@
 
 	p {
 		margin: 0;
+		letter-spacing: 0;
 	}
 
 	a {

dev/sass/base/_new-breadcrumb.scss

+.inner-banner-absolute-image {
+	.left-text-wrapper {
+		a {
+			max-width: fit-content;
+			margin-top: 24px;
+		}
+	}
+	.image-wrapper {
+		display: none;
+	}
+}
+
+@media (min-width: 992px) {
+	.inner-banner-absolute-image {
+		padding-bottom: 92px;
+		.inner-banner-wrapper {
+			position: relative;
+		}
+		.image-wrapper {
+			display: block;
+			.image {
+				position: absolute;
+				top: 0;
+				right: 0;
+				img {
+					height: unset;
+					max-width: 72%;
+				}
+			}
+		}
+	}
+}
+@media (min-width: 1200px) {
+	.inner-banner-absolute-image {
+		.image-wrapper {
+			.image {
+				img {
+					max-width: 80%;
+				}
+			}
+		}
+	}
+}
+@media (min-width: 1440px) {
+	.inner-banner-absolute-image {
+		.image-wrapper {
+			.image {
+				img {
+					max-width: 95%;
+				}
+			}
+		}
+	}
+}

dev/sass/style.scss

@@ -26,6 +26,7 @@ $body-font: "Sora", sans-serif;
 @import "base/base";
 @import "base/header";
 @import "base/footer";
+@import "base/new-breadcrumb";
 @import "pages/index";
 @import "pages/about";
 @import "pages/contact";