Aspect ratio

Author: w3bdesign

src/components/Product/DisplayProducts.component.tsx

@@ -77,7 +77,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
             return (
               <div key={uuidv4()} className="group">
                 <Link href={`/produkt/${encodeURIComponent(slug)}`}>
-                  <div className="aspect-[3/4] relative overflow-hidden bg-gray-100">
+                  <div className="relative overflow-hidden bg-gray-100">
                     {image ? (
                       <img
                         id="product-image"

src/components/Product/ProductCard.component.tsx

@@ -32,7 +32,7 @@ const ProductCard = ({
 
   return (
     <div className="group">
-      <div className="aspect-[3/4] overflow-hidden bg-gray-100 relative">
+      <div className="overflow-hidden bg-gray-100 relative">
         <Link href={`/produkt/${slug}`}>
           {image?.sourceUrl ? (
             <Image

src/components/Product/SingleProduct.component.tsx

@@ -59,7 +59,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
           <div className="flex flex-col md:grid md:grid-cols-2 md:gap-8">
             {/* Image Container */}
             <div className="mb-6 md:mb-0 group">
-              <div className="max-w-xl mx-auto aspect-[3/4] relative overflow-hidden bg-gray-100">
+              <div className="max-w-xl mx-auto relative overflow-hidden bg-gray-100">
                 <img
                   id="product-image"
                   src={