portfolio-herosection

src/assets/css/portfolio-responsive.css

@@ -246,6 +246,7 @@
     padding-right: 19px;
     padding-bottom: 122px;
     margin-top: 78px;
+    
   }
 
   .hero-section video,
@@ -441,4 +442,14 @@
     padding: 0;
     margin: 0 auto;
   }
+  .desktop-file {
+    display: none;
+  }
+  .mobile-file {
+    display: block;
+    width: 100%;
+  }
+   .hero-section {
+     aspect-ratio: 9 / 17;
+  }
 }

src/assets/css/portfolio.css

@@ -20,7 +20,9 @@ section[class*='-section'] {
 .hero-section {
   position: relative;
   width: 100%;
-  height: 100vh;
+   aspect-ratio: 16 / 8;
+   max-height: 725px;
+  /* height: clamp(500px, 70vh, 725px); */
   overflow: hidden;
   display: flex;
   align-items: end;
@@ -56,6 +58,13 @@ section[class*='-section'] {
     linear-gradient(106.84deg, rgba(0, 63, 97, 0) 0%, rgba(0, 20, 31, 0.6) 94.22%),
     linear-gradient(0deg, rgba(0, 20, 31, 0.15), rgba(0, 20, 31, 0.15));
 }
+.desktop-file{
+  display: block;
+  width: 100%;
+}
+.mobile-file{
+  display: none;
+}
 .hero-content {
   position: relative;
   z-index: 2;