From 7d761ed1404da580b8168ff36fd1f778add7dea7 Mon Sep 17 00:00:00 2001
From: Seif Ghezala <seif@tinloof.com>
Date: Wed, 16 Oct 2024 15:05:07 +0400
Subject: [PATCH] Fix hero asset styles

---
 storefront/app/globals.css                    | 4 ++++
 storefront/components/sections/hero/index.tsx | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/storefront/app/globals.css b/storefront/app/globals.css
index 29aaf08..3023601 100644
--- a/storefront/app/globals.css
+++ b/storefront/app/globals.css
@@ -29,6 +29,10 @@
     --base-font-size: 16px;
   }
 
+  .hero-asset {
+    min-height: min(590px, calc(100vh - var(--header-height) - 1rem));
+  }
+
   .newletter-text:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
     box-shadow: 0 0 0px 1000px transparent inset !important;
diff --git a/storefront/components/sections/hero/index.tsx b/storefront/components/sections/hero/index.tsx
index ec81dfc..5f2d4d3 100644
--- a/storefront/components/sections/hero/index.tsx
+++ b/storefront/components/sections/hero/index.tsx
@@ -19,9 +19,9 @@ export default function Hero(props: ModularPageSection<"section.hero">) {
       {mediaType === "image" && <SimpleHero {...props} />}
       {mediaType === "video" && video && (
         <LargeHero props={props}>
-          <div className="aspect-[16/9] min-h-[590px] w-full overflow-hidden rounded-lg object-cover object-center">
+          <div className="hero-asset grid w-full overflow-hidden rounded-lg object-cover object-center">
             <Video
-              aspectRatio="16/9"
+              className="h-full w-full object-cover"
               fetchPriority="high"
               poster={video.poster}
               videoUrl={video.url}
@@ -32,7 +32,7 @@ export default function Hero(props: ModularPageSection<"section.hero">) {
       {mediaType === "largeImage" && largeImage && (
         <LargeHero props={props}>
           <SanityImage
-            className="aspect-[16/9] min-h-[590px] w-full rounded-lg object-cover object-center"
+            className="hero-asset w-full rounded-lg object-cover object-center"
             data={largeImage}
             fetchPriority="high"
           />