more css styling changes for mobile

src/app/(non-home)/events/Events.scss

@@ -1,58 +1,94 @@
-.events_page {
-  margin-inline: auto;
-  max-width: 2000px;
-  margin-block: 1rem;
+@media screen and (max-width: 767px) {
+  .events_page {
+    h1 {
+      margin-block: 2.5rem;
+    }
 
-  @media screen and (min-width: 768px) {
-    padding-inline: clamp(24px, 5px + 5vw, 6rem);
+    .events-container {
+      margin-block: 1rem;
+    }
+
+    margin-inline: 1.5rem;
     margin-block: 1rem;
+  }
 
-    h1 {
-      margin-block: 2rem;
-    }
+  .button-container {
+    display: flex;
+    gap: 1rem;
+    margin-block: 1rem;
+  }
+}
+
+@media screen and (min-width: 767px) {
+  .events_page {
+    margin-inline: auto;
+    max-width: 2000px;
+    margin-block: 1rem;
 
-    .upcoming-event {
-      color: white;
-      background-color: #191919;
-      padding: 2rem 0;
+    @media screen and (max-width: 767px) {
+      .events-container {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+      }
 
-      h2 {
-        margin-left: 1rem;
+      .button-container {
+        display: flex;
+        gap: 1rem;
       }
     }
 
-    .button-container {
-      display: flex;
-      gap: 1rem;
-      padding: 1rem 0;
-
-      button {
-        --text-color: black;
-        --background-color: white;
-        color: var(--text-color);
-        background-color: var(--background-color);
-        border: 1.5px solid var(--text-color);
-        border-radius: 40px;
-        padding: 0.4rem 1rem 0.5rem;
-        font-size: 1.1rem;
-        font-family: $heading-font;
-        font-weight: 700;
-        cursor: pointer;
-
-        &.active {
-          --text-color: white;
-          --background-color: black;
+    @media screen and (min-width: 768px) {
+      padding-inline: clamp(24px, 5px + 5vw, 6rem);
+      margin-block: 1rem;
+
+      h1 {
+        margin-block: 2rem;
+      }
+
+      .upcoming-event {
+        color: white;
+        background-color: #191919;
+        padding: 2rem 0;
+
+        h2 {
+          margin-left: 1rem;
         }
       }
-    }
 
-    .events-container {
-      margin: 1rem 0;
-      margin-bottom: 1rem;
-      display: grid;
-      gap: 1px;
-      grid-template-columns: repeat(3, 1fr);
-      row-gap: 2rem;
+      .button-container {
+        display: flex;
+        gap: 1rem;
+        padding: 1rem 0;
+
+        button {
+          --text-color: black;
+          --background-color: white;
+          color: var(--text-color);
+          background-color: var(--background-color);
+          border: 1.5px solid var(--text-color);
+          border-radius: 40px;
+          padding: 0.4rem 1rem 0.5rem;
+          font-size: 1.1rem;
+          font-family: $heading-font;
+          font-weight: 700;
+          cursor: pointer;
+
+          &.active {
+            --text-color: white;
+            --background-color: black;
+          }
+        }
+      }
+
+      .events-container {
+        margin: 1rem 0;
+        margin-bottom: 1rem;
+        display: grid;
+        gap: 1px;
+        grid-template-columns: repeat(3, 1fr);
+        row-gap: 2rem;
+      }
     }
   }
 }

src/app/(non-home)/events/PastEventSection.tsx

@@ -24,6 +24,7 @@ export default function EventSection() {
 
   return (
     <div className="past-events">
+      <h2>Past Events</h2>
       <div className="button-container">
         <button
           onClick={() => setEventType('GBMs/Socials')}
@@ -38,11 +39,11 @@ export default function EventSection() {
           Large-Scale Events
         </button>
       </div>
-      <h3>2024-2025</h3>
+      <h3 className="year">2024-2025</h3>
       <div className="events-container">
         <h4>Events coming soon!</h4>
       </div>
-      <h3>2023-2024</h3>
+      <h3 className="year">2023-2024</h3>
       <div className="events-container">
         {filteredEvents.map(item => (
           <EventCard

src/app/(non-home)/events/page.tsx

@@ -11,7 +11,6 @@ export default function Events() {
         workshops, socials, and large-scale events.
       </h1>
       {/* <UpcomingEvent /> */}
-      <h2>Past Events</h2>
       <PastEventSection />
     </main>
   );

src/app/components/EventCard/EventCard.scss

@@ -1,28 +1,41 @@
-.event-image {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-transform: perspective(1px) translateZ(0);
-  transform: perspective(1px) translateZ(0);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-transition-duration: 0.3s;
-  transition-duration: 0.3s;
-  -webkit-transition-property: transform;
-  transition-property: transform;
+/*@media screen and (max-width: 767px) {
+  .event-card {
+    
+  }
 }
+*/
 
-.event-image:hover,
-.event-image:focus,
-.event-image:active {
-  -webkit-transform: scale(0.925);
-  transform: scale(0.925);
-}
+.event-card {
+  margin-block: 2rem;
 
-.event-card-content {
-  .event-card-title {
-    padding: 1rem 0;
+  .event-image {
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-transform: perspective(1px) translateZ(0);
+    transform: perspective(1px) translateZ(0);
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+    -webkit-transition-duration: 0.3s;
+    transition-duration: 0.3s;
+    -webkit-transition-property: transform;
+    transition-property: transform;
+    width: 80%;
+    height: 80%;
   }
 
-  .event-card-description {
-    font-size: 15px;
+  .event-image:hover,
+  .event-image:focus,
+  .event-image:active {
+    -webkit-transform: scale(0.925);
+    transform: scale(0.925);
+  }
+
+  .event-card-content {
+    .event-card-title {
+      padding: 1rem 0;
+    }
+
+    .event-card-description {
+      font-size: 15px;
+    }
   }
 }

src/app/components/EventCard/EventCard.tsx

@@ -26,8 +26,8 @@ export default function EventCard({
             className="event-image"
             src={imgLink}
             alt={`graphic for ${{ event_title }}`}
-            width="250"
-            height="250"
+            width="500"
+            height="500"
           />
         </a>
       </div>