From 23f61c12f8d294cf2f078bafb2bad5cc7d318d45 Mon Sep 17 00:00:00 2001
From: =Mtg_Dev <=mtg0987654321@gmail.com>
Date: Tue, 23 Nov 2021 11:45:31 +0200
Subject: [PATCH] fixed aspect-ratio

---
 src/Components/Project/ProjectCard.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Components/Project/ProjectCard.tsx b/src/Components/Project/ProjectCard.tsx
index 2806ed2..d74ff15 100644
--- a/src/Components/Project/ProjectCard.tsx
+++ b/src/Components/Project/ProjectCard.tsx
@@ -93,17 +93,17 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
                 <div className="mt-40">
                     <h3 className="text-h5 font-bold mb-16">Screenshots</h3>
                     <div className="grid grid-cols-2 gap-12 justify-items-center md:gap-24">
-                        <div className="w-full relative" style={{ aspectRatio: '16/9' }}>
-                            <div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                        <div className="w-full relative pt-[56%]">
+                            <div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
                         </div>
-                        <div className="w-full relative" style={{ aspectRatio: '16/9' }}>
-                            <div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                        <div className="w-full relative pt-[56%]">
+                            <div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
                         </div>
-                        <div className="w-full relative" style={{ aspectRatio: '16/9' }}>
-                            <div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                        <div className="w-full relative pt-[56%]">
+                            <div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
                         </div>
-                        <div className="w-full relative" style={{ aspectRatio: '16/9' }}>
-                            <div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                        <div className="w-full relative pt-[56%]">
+                            <div className="absolute inset-0 object-cover bg-gray-300 rounded-xl"></div>
                         </div>
                     </div>
                 </div>