add classnames

components/MainCard.js

@@ -17,12 +17,11 @@ export const MainCard = ({
       </h1>
       <p className={styles.description}>{description}</p>
       <Image
-        alt="weatherIcon"
+        className={styles.image}
         src={`/icons/${iconName}.svg`}
-        height="300px"
-        width="300px"
+        alt="weatherIcon"
       />
-      <h1 className={styles.mainTemp}>
+      <h1 className={styles.temperature}>
         {systemUsed == "metric"
           ? Math.round(weatherData.main.temp)
           : Math.round(ctoF(weatherData.main.temp))}

components/MainCard.module.css

@@ -13,6 +13,11 @@
   margin-bottom: 20px;
 }
 
-.mainTemp {
+.image {
+  width: 300px;
+  height: 300px;
+}
+
+.temperature {
   font-size: 84px;
 }

components/MetricsCard.js

@@ -6,7 +6,7 @@ export const MetricsCard = ({ title, iconSrc, metric, unit }) => {
     <div className={styles.wrapper}>
       <p>{title}</p>
       <div className={styles.content}>
-        <Image alt="weatherIcon" src={iconSrc} height="100px" width="100px" />
+        <Image className={styles.image} src={iconSrc} alt="weatherIcon" />
         <div>
           <h1>{metric}</h1>
           <p>{unit}</p>

components/MetricsCard.module.css

@@ -9,6 +9,11 @@
   grid-template-columns: 1fr 1fr;
 }
 
+.image {
+  height: 100px;
+  width: 100px;
+}
+
 @media only screen and (max-width: 475px) {
   .content {
     grid-template-columns: 1fr 2fr;