Add sections

pages/events/[year]/[term]/index.module.css

@@ -3,7 +3,7 @@
   margin-bottom: calc(60rem / 16);
 }
 
-.main > h1 {
+.main > h1, .main > section > h1 {
   padding-bottom: calc(16rem / 16);
   border-bottom: calc(1rem / 16) solid var(--primary-heading);
 }

pages/events/[year]/[term]/index.tsx

@@ -65,7 +65,7 @@ export default function Term(props: Props) {
         <Link href="/events/archive">Archive</Link>
       </div>
       {hasFutureEvents && (
-        <>
+        <section>
           <h1>Upcoming Events</h1>
           <div className={styles.miniEventCards}>
             {props.futureEvents.map(({ content, metadata }) => (
@@ -79,9 +79,23 @@ export default function Term(props: Props) {
               </EventCard>
             ))}
           </div>
-        </>
+        </section>
+      )}
+      {hasPastEvents && props.isCurrentTerm && (
+        <section>
+          <h1>Past Events</h1>
+          <div className={styles.miniEventCards}>
+            {props.pastEvents.map(({ content, metadata }) => (
+              <MiniEventCard
+                {...metadata}
+                date={new Date(metadata.date)}
+                description={<MDXRemote {...content} />}
+                key={metadata.name + metadata.date.toString()}
+              />
+            ))}
+          </div>
+        </section>
       )}
-      {hasPastEvents && props.isCurrentTerm && <h2>Past Events</h2>}
       {hasPastEvents && !props.isCurrentTerm && (
         <h1>
           Events Archive: