feat(grid): optional vertical separator

src/components/grid.js

@@ -4,7 +4,7 @@ import { css } from "@emotion/react";
 
 const Container = styled.div`
   display: grid;
-  gap: var(--spacing-y-sm) var(--spacing-x-md);
+  gap: var(--spacing-y-lg) var(--spacing-x-md);
   ${props =>
     props.columns &&
     props.columns.map((column, i) =>
@@ -18,16 +18,39 @@ const Container = styled.div`
     ${
       i === 1 &&
       css`
-        gap: var(--spacing-y-md) var(--spacing-x-lg);
+        gap: var(--spacing-y-lg) var(--spacing-x-lg);
       `
     }
 `
     )}
+
+  ${props =>
+    props.verticalSeparator &&
+    css`
+      @media (max-width: ${props.verticalSeparator}) {
+        > * {
+          padding-bottom: var(--spacing-y-lg);
+        }
+
+        > :not(:last-of-type) {
+          border-bottom: 1px solid var(--color-mid-grey);
+        }
+      }
+    `}
 `;
 
-export default function Grid({ columns, breakpoints = ["30em"], children }) {
+export default function Grid({
+  columns,
+  breakpoints = ["30em"],
+  verticalSeparator,
+  children
+}) {
   return (
-    <Container columns={columns} breakpoints={breakpoints}>
+    <Container
+      columns={columns}
+      breakpoints={breakpoints}
+      verticalSeparator={verticalSeparator}
+    >
       {children}
     </Container>
   );