feat(section): add custom breakpoint support

src/components/section.js

@@ -2,7 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 const Container = styled.div`
-  padding: var(--spacing-y-md) var(--spacing-x-sm);
+  padding: var(--spacing-y-lg) var(--spacing-x-sm);
   ${props => !props.variant && `background-color: var(--color-white);`}
   ${props =>
     props.variant === "primary" &&
@@ -19,7 +19,7 @@ const Content = styled.div`
   ${props =>
     props.grid > 0 &&
     css`
-      @media (min-width: 30em) {
+      @media (min-width: ${props.breakpoint}) {
         display: grid;
         grid-template-columns: repeat(${props.grid}, 1fr);
         gap: var(--spacing-x-xs);
@@ -27,10 +27,17 @@ const Content = styled.div`
     `}
 `;
 
-export default function Section({ children, variant, grid }) {
+export default function Section({
+  children,
+  variant,
+  grid,
+  breakpoint = "30em"
+}) {
   return (
     <Container variant={variant}>
-      <Content grid={grid}>{children}</Content>
+      <Content grid={grid} breakpoint={breakpoint}>
+        {children}
+      </Content>
     </Container>
   );
 }