Address CSS issues

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

@@ -31,7 +31,7 @@ export default function Term(props: Props) {
     <div className={styles.main}>
       {hasFutureEvents && (
         <>
-          <h2 className={styles.heading2}>Upcoming Events:</h2>
+          <h2>Upcoming Events:</h2>
           <hr />
           <div className={styles.miniEventCards}>
             {props.futureEvents.map(({ content, metadata }) => (
@@ -48,13 +48,13 @@ export default function Term(props: Props) {
       )}
       {hasFutureEvents && hasPastEvents && (
         <>
-          <h2 className={styles.heading2}>Past Events:</h2>
+          <h2>Past Events:</h2>
           <hr />
         </>
       )}
       {!hasFutureEvents && (
         <>
-          <h2 className={styles.heading2}>
+          <h2>
             Events Archive:
             <span className={styles.blue}>
               {` ${props.term.charAt(0).toUpperCase()}${props.term.slice(1)} ${

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

@@ -1,13 +1,11 @@
 .main {
-  margin: auto;
   margin-top: calc(112rem / 16);
-  margin-bottom: calc(224rem / 16);
-  width: calc(800rem / 16);
 }
 
-.heading2 {
-  font-weight: 700;
-  color: var(--primary-heading);
+@media only screen and (max-width: calc(768rem / 16)) {
+  .main {
+    margin-top: calc(48rem / 16);
+  }
 }
 
 .blue {