diff --git a/css/style.css b/css/style.css
index f38e0cd..fa3c22d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -574,6 +574,10 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
   .hero .intro-wrap {
     position: relative;
     z-index: 1; }
+    @media (max-width: 991.98px) {
+      .hero .intro-wrap{
+        margin-bottom: 1rem; }
+    }
   .hero .slides {
     background: #ffffff;
     max-width: 800px;
@@ -583,11 +587,12 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
     border-radius: 200px;
     -webkit-box-shadow: 0 25px 50px -10px rgba(26, 55, 77, 0.4);
     box-shadow: 0 25px 50px -10px rgba(26, 55, 77, 0.4);
-    height: 608px;
+    aspect-ratio: 68/93;
     margin-bottom: -200px; }
     @media (max-width: 991.98px) {
       .hero .slides {
-        left: 0; } }
+        left: 0; } 
+      }
     .hero .slides img {
       position: absolute;
       border-radius: 200px;
diff --git a/scss/_site-blocks.scss b/scss/_site-blocks.scss
index 6f66ed5..13428cf 100644
--- a/scss/_site-blocks.scss
+++ b/scss/_site-blocks.scss
@@ -30,6 +30,10 @@
 	.intro-wrap {
 		position: relative;
 		z-index: 1;
+		@include media-breakpoint-down(md) {
+			margin-bottom: 1rem;
+
+		}
 	}
 
 	.slides {
@@ -45,7 +49,7 @@
 		// top: -300px;
 		// overflow: hidden;
 		
-		height: 608px;
+		aspect-ratio: 68/93;
 		margin-bottom: -200px;
 		@include media-breakpoint-down(md) {
 			left: 0;