Fix hero asset styles

tinloof · Oct 16, 2024 · 7d761ed · 7d761ed
1 parent aa7d549
commit 7d761ed
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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"
           />