diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index 171190df0..a289cc1df 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/components/product/ProductCard/ProductCard.module.css @@ -1,5 +1,6 @@ .root { - @apply relative w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer; + @apply relative max-h-full w-full box-border overflow-hidden bg-no-repeat bg-center bg-cover transition ease-linear cursor-pointer; + height: 100% !important; &:hover { & .squareBg:before { @@ -119,17 +120,11 @@ } .wishlistButton { - @apply w-10 h-10 flex ml-auto flex items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; + @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; } -.imageContainer { - @apply absolute z-10 inset-0 flex items-center justify-center; - - & > div { - @apply h-full; - & > div { - @apply h-full; - padding-bottom: 0 !important; - } - } +.product-image { + position: absolute; + width: 100%; + height: 100%; } diff --git a/pages/index.tsx b/pages/index.tsx index 5304f691e..44a93c1d7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -80,8 +80,8 @@ export default function Home({ key={node.path} product={node} // The first image is the largest one in the grid - imgWidth={i === 0 ? '65vw' : '30vw'} - imgHeight={i === 0 ? '45vw' : '22vw'} + imgWidth={i === 0 ? 1600 : 820} + imgHeight={i === 0 ? 1600 : 820} priority /> ))}