Fix inconsistencies

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

@@ -3,8 +3,8 @@
   margin-bottom: calc(60rem / 16);
 }
 
-.main > h2 {
-  padding-bottom: 1rem;
+.main > h1 {
+  padding-bottom: calc(16rem / 16);
   border-bottom: 1px solid var(--primary-heading);
 }
 
@@ -29,3 +29,10 @@
 .main > .miniEventCards {
   margin-top: 0;
 }
+
+@media only screen and (max-width: calc(425rem / 16)) {
+  .header {
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -66,7 +66,7 @@ export default function Term(props: Props) {
       </div>
       {hasFutureEvents && (
         <>
-          <h2>Upcoming Events</h2>
+          <h1>Upcoming Events</h1>
           <div className={styles.miniEventCards}>
             {props.futureEvents.map(({ content, metadata }) => (
               <EventCard
@@ -83,16 +83,16 @@ export default function Term(props: Props) {
       )}
       {hasPastEvents && props.isCurrentTerm && <h2>Past Events</h2>}
       {hasPastEvents && !props.isCurrentTerm && (
-        <h2>
+        <h1>
           Events Archive:
           <span className={styles.blue}>
             {` ${capitalize(props.term)} ${props.year}`}
           </span>
-        </h2>
+        </h1>
       )}
       {!hasFutureEvents && !hasPastEvents && (
         <>
-          <h2>Events</h2>
+          <h1>Events</h1>
           There are no upcoming or past events for the{" "}
           {`${capitalize(props.term)} ${props.year}`} term. Please check back
           later!

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

@@ -2,8 +2,8 @@
   margin-top: calc(60rem / 16);
 }
 
-.main > h2 {
-  padding-bottom: calc(1rem / 16);
+.main > h1 {
+  padding-bottom: calc(16rem / 16);
   border-bottom: 1px solid var(--primary-heading);
 }
 

pages/events/[year]/index.tsx

@@ -16,9 +16,9 @@ interface Props {
 export default function Year(props: Props) {
   return (
     <div className={styles.main}>
-      <h2>
+      <h1>
         Events Archive:<span className={styles.blue}>{` ${props.year}`}</span>
-      </h2>
+      </h1>
       <ul className={styles.list}>
         {props.terms.map((term) => (
           <li key={`${props.year}-${term}`}>

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

@@ -2,6 +2,11 @@
   padding-bottom: calc(30rem / 16);
 }
 
+.page > h1 {
+  padding-bottom: calc(16rem / 16);
+  border-bottom: 1px solid var(--primary-heading);
+}
+
 .term {
   color: var(--primary-accent);
 }