From e2f5bbbe9cefd893a40cbd9f14ce819da8ab1c0e Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Tue, 10 Mar 2026 23:30:23 -0500
Subject: [PATCH] feat: hide cards on small screens

---
 src/components/cards/WeatherCard.astro       |  2 +-
 src/components/sections/WeatherSection.astro | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/cards/WeatherCard.astro b/src/components/cards/WeatherCard.astro
index c48d61e..1369255 100644
--- a/src/components/cards/WeatherCard.astro
+++ b/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}
diff --git a/src/components/sections/WeatherSection.astro b/src/components/sections/WeatherSection.astro
index 04adaf3..8f03b05 100644
--- a/src/components/sections/WeatherSection.astro
+++ b/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>
   )}