feat: hide cards on small screens

src/components/cards/WeatherCard.astro

@@ -10,7 +10,7 @@ const { dayName, label, icon, temp } = Astro.props;
 ---
 
 <div class="smooth-reveal-2 group flex flex-col">
-  <div class="card-base w-32 md:w-40">
+  <div class="card-base w-40">
     <div class="p-5 text-center">
       <span class="card-text-description block font-bold text-xs uppercase tracking-widest">
         {dayName}

src/components/sections/WeatherSection.astro

@@ -24,13 +24,15 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
   </div>
   ) : (
   <div class="flex flex-wrap justify-center gap-4 lg:gap-6">
-    {forecastDays.map((forecastDay) => (
-    <WeatherCard
-      dayName={forecastDay.dayName}
-      label={forecastDay.label}
-      icon={forecastDay.icon}
-      temp={forecastDay.temp}
-    />
+    {forecastDays.map((forecastDay, index) => (
+    <div class={index === 3 ? "hidden min-[800px]:block" : index >= 4 ? "hidden min-[1100px]:block" : ""}>
+      <WeatherCard
+        dayName={forecastDay.dayName}
+        label={forecastDay.label}
+        icon={forecastDay.icon}
+        temp={forecastDay.temp}
+      />
+    </div>
     ))}
   </div>
   )}