Mobile layout updates.

components/common/Link.module.css

@@ -8,14 +8,12 @@ a.link:visited {
   align-items: center;
 }
 
-a.link:hover:before {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  width: 100%;
-  height: 2px;
-  background: var(--primary400);
-  opacity: 0.5;
+a.link span {
+  border-bottom: 2px solid transparent;
+}
+
+a.link:hover span {
+  border-bottom: 2px solid var(--primary400);
 }
 
 a.link.large {

components/common/MobileMenu.module.css

@@ -28,6 +28,10 @@
   margin-top: 20px;
 }
 
+.item:last-child {
+  margin-top: 60px;
+}
+
 .button {
   margin-right: 15px;
 }

components/common/Table.js

@@ -76,12 +76,13 @@ export default Table;
 
 export const TableRow = ({ columns, row }) => (
   <div className={classNames(styles.row, 'row')}>
-    {columns.map(({ key, render, className, style, cell }, index) => (
+    {columns.map(({ key, label, render, className, style, cell }, index) => (
       <div
         key={`${key}-${index}`}
         className={classNames(styles.cell, className, cell?.className)}
         style={{ ...style, ...cell?.style }}
       >
+        {label && <label>{label}</label>}
         {render ? render(row) : row[key]}
       </div>
     ))}

components/common/Table.module.css

@@ -3,6 +3,12 @@
   flex-direction: column;
 }
 
+.table label {
+  display: none;
+  font-size: var(--font-size-xsmall);
+  font-weight: bold;
+}
+
 .header {
   border-bottom: 1px solid var(--gray300);
 }
@@ -26,5 +32,24 @@
 
 .cell {
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
 }
+
+@media only screen and (max-width: 992px) {
+  .table label {
+    display: block;
+  }
+
+  .header {
+    display: none;
+  }
+
+  .row {
+    flex-direction: column;
+  }
+
+  .cell {
+    margin-bottom: 20px;
+  }
+}