pages/index.module.css

@@ -19,7 +19,7 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  gap: calc(15rem / 16);
+  gap: 1rem;
 }
 
 .clubTitleWrapper img {
@@ -64,7 +64,7 @@
   align-items: flex-start;
   gap: calc(100rem / 16);
 
-  padding: calc(42rem / 16);
+  padding: calc(42rem / 16) calc(100rem / 16);
 }
 
 .cardsHeading {
@@ -101,10 +101,16 @@
   padding-bottom: calc(20rem / 16);
 }
 
-/* On a smaller desktop screen, decrease the horizontal space between events/news */
+/* On a smaller desktop screen, make the events/new flow vertically */
 @media only screen and (max-width: calc(960rem / 16)) {
   .cards {
-    gap: calc(50rem / 16);
+    flex-direction: column;
+    align-items: center;
+    gap: calc(32rem / 16);
+  }
+
+  .cards > section {
+    max-width: calc(540rem / 16);
   }
 }
 

pages/index.tsx

@@ -24,7 +24,7 @@ export default function Home() {
 
   return (
     <>
-      <main className={styles.intro}>
+      <header className={styles.intro}>
         <div className={styles.introContent}>
           <div className={styles.clubTitleWrapper}>
             <Image src="/images/logo-icon.svg" alt="CSC Logo" />
@@ -41,12 +41,12 @@ export default function Home() {
           src="/images/home/codey_sitting.svg"
           alt="CSC mascot Codey, a blue shiba with circular glasses"
         />
-      </main>
+      </header>
       <div className={styles.cardsBackground}>
         <div className={styles.cards}>
           {/* TODO: add links to past events and past news */}
           <section className={styles.events}>
-            <h2 className={styles.cardsHeading}>Upcoming Events</h2>
+            <h1 className={styles.cardsHeading}>Upcoming Events</h1>
             <p className={styles.cardsDescription}>See past events here</p>
             <hr className={styles.cardsDividingLine} />
             <div className={styles.eventCards}>
@@ -59,7 +59,7 @@ export default function Home() {
             </div>
           </section>
           <section className={styles.news}>
-            <h2 className={styles.cardsHeading}>News</h2>
+            <h1 className={styles.cardsHeading}>News</h1>
             <p className={styles.cardsDescription}>
               Updates from our execs! <br />
               See past news here
@@ -79,5 +79,5 @@ export default function Home() {
 }
 
 Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
-  return props.children;
+  return <div>{props.children}</div>;
 };