Address CSS issues

pages/events/[year]/index.tsx

@@ -16,17 +16,19 @@ interface Props {
 export default function Year(props: Props) {
   return (
     <div className={styles.main}>
-      <h2 className={styles.heading2}>
+      <h2>
         Events Archive:<span className={styles.blue}>{` ${props.year}`}</span>
       </h2>
       <hr />
-      <div className={styles.links}>
+      <ul className={styles.list}>
         {props.terms.map((term) => (
-          <Link key={term} href={`/events/${props.year}/${term}`}>
-            {`${term.charAt(0).toUpperCase()}${term.slice(1)}`}
-          </Link>
+          <li key={`${props.year}-${term}`}>
+            <Link href={`/events/${props.year}/${term}`}>
+              {`${term.charAt(0).toUpperCase()}${term.slice(1)}`}
+            </Link>
+          </li>
         ))}
-      </div>
+      </ul>
     </div>
   );
 }

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

@@ -1,26 +1,22 @@
 .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 {
   color: var(--primary-accent)
 }
 
-.links {
-  display: flex;
-  flex-direction: column;
+.list {
+  list-style: none;
+  padding: 0;
 }
 
-.links > * {
-  font-weight: 400;
-  font-size: 16px;
-  margin-top: calc(30rem/16);
-}
+.list > li {
+  line-height: 3;
+}