Reponsive homepage: Office hours and sponsors

src/components/OHSchedule.svelte

@@ -20,24 +20,24 @@
   });
 </script>
 
-<div class="grid min-w-2/3 grid-cols-5 gap-2 place-self-center">
+<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2 place-self-center place-content-center">
   {#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day}
-		
     <div>
       <p class="text-center text-xl">{day}</p>
       {#each sortedOHs.filter((OH) => OH.day == day) as OH}
         <div
-					class="
+          class="bg-ecsess-200 text-ecsess-black m-2 grid h-28 lg:h-36 max-w-md
-					bg-ecsess-200 text-ecsess-black m-2 grid h-36 max-w-md min-w-50
+            min-w-50 grid-cols-1 grid-rows-[2fr_4fr_3fr]
-					 grid-rows-[2fr_4fr_3fr] place-content-center rounded-xl
+            place-content-center rounded-xl p-3 text-center"
-					p-3 text-center"
         >
-					<p class="border-b-ecsess-600 border-b-2 text-lg">{OH.startTime} - {OH.endTime}</p>
+          <p class="border-b-ecsess-600 md:text-md border-b-2 text-base lg:text-lg">
+            {OH.startTime} - {OH.endTime}
+          </p>
 
-					<p class="text-ecsess-800 place-self-center text-2xl font-bold">
+          <p class="text-ecsess-800 place-self-center font-extrabold text-lg md:text-xl lg:text-2xl">
             {OH.member.name.split(' ')[0]}
           </p>
-					<p class="text-sm italic">{OH.member.position}</p>
+          <p class="text-sm italic lg:text-base">{OH.member.position}</p>
         </div>
       {/each}
     </div>

src/routes/+page.svelte

@@ -49,34 +49,31 @@
 <!-- Office Hours Calendar -->
 <Section black>
 	<div class="w-full">
-		<div class="">
 		<h1 id="office-hours">Office Hours</h1>
 		<OhSchedule allOhs={data.allOHs} />
 	</div>
-	</div>
 </Section>
 
 <Section>
-	<div class="grid grid-cols-2 w-full max-w-[80vw] gap-24">
+	<div class="grid w-full max-w-[80vw] grid-cols-1 gap-12 lg:gap-24 lg:grid-cols-2">
-
+		<div>
-		<div class="col-span-1">
 			<h1>FAQs</h1>
-			<hr class="hr py-4 border-dashed w-full">
+			<hr class="hr w-full border-dashed py-4" />
 			<FaqAccordion entries={data.faqs} />
 		</div>
-		<div id="sponsors" class="col-span-1">
+		<div id="sponsors" class="mb-24">
 			<h1>Sponsors</h1>
-			<hr class="hr py-4 border-dashed w-full">
+			<hr class="hr w-full border-dashed py-4" />
 
 			<div class="flex gap-12">
 				{#each data.sponsors as sponsor}
 					<div class="max-h-20">
 						<Link href={sponsor.url}>
-						<img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24"/>
+							<img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24" />
 						</Link>
 					</div>
 				{/each}
 			</div>
 		</div>
 	</div>
-	</Section>
+</Section>