From 36754f07eba826b3a332bbd2be563470495ef303 Mon Sep 17 00:00:00 2001
From: Chee Kian Teoh <teoh4770@mylaurier.ca>
Date: Wed, 10 Apr 2024 18:11:43 -0400
Subject: [PATCH] fix: no more / rare content shift

---
 src/components/sections/HeroStats.section.tsx |  4 ++++
 src/index.css                                 | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/sections/HeroStats.section.tsx b/src/components/sections/HeroStats.section.tsx
index 9073072d..6fe3cc83 100644
--- a/src/components/sections/HeroStats.section.tsx
+++ b/src/components/sections/HeroStats.section.tsx
@@ -62,11 +62,15 @@ const HeroStatSection: React.FC = () => {
                     src={HeroAboutDesktop}
                     alt="Hawkhacks stats"
                     className="hidden w-full sm:block"
+                    width="1920"
+                    height="7149"
                 />
                 <img
                     src={HeroAboutMobile}
                     alt="Hawkhacks stats"
                     className="block w-full sm:hidden"
+                    width="1920"
+                    height="8127"
                 />
                 <div className="mt-16 px-4 sm:ml-16 sm:mt-16 sm:px-0 lg:ml-20 lg:mt-24 xl:ml-24 xl:mt-32 2xl:mt-10">
                     <img
diff --git a/src/index.css b/src/index.css
index e2b5ec4d..c0ce01a1 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,6 +11,10 @@ body {
     background-color: #fdddb7;
 }
 
+img {
+    aspect-ratio: attr(width) / attr(height);
+}
+
 @layer base {
     h1 {
         @apply text-8xl font-extrabold 2xl:text-8.5xl;
@@ -87,9 +91,9 @@ header::before {
 
 @keyframes spin {
     from {
-      transform: rotate(0deg);
+        transform: rotate(0deg);
     }
     to {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
-}
\ No newline at end of file
+}