From c0277d9ba1cb4e9af52aa70d1ba606be92050e4d Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 30 Jul 2020 12:50:29 -0700
Subject: [PATCH] feat: use dynamic breakpoint for side by side component based
 on layout

---
 src/components/SideBySide.js          | 19 ++++++++++++++++++-
 src/components/SideBySide.module.scss |  5 -----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
index 03e67d881..9e5a87a4e 100644
--- a/src/components/SideBySide.js
+++ b/src/components/SideBySide.js
@@ -1,10 +1,17 @@
 import React, { Children, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import { css } from '@emotion/core';
 import styles from './SideBySide.module.scss';
 import splitUsing from '../utils/splitUsing';
 import splitWhen from '../utils/splitWhen';
 import { isMdxType } from '../utils/mdx';
+import usePageLayout from '../hooks/usePageLayout';
+
+const BREAKPOINTS = {
+  SINGLE_COLUMN: '1240px',
+  RELATED_CONTENT: '1520px',
+};
 
 const SideBySide = ({ className, children, type }) => {
   const types = Array.isArray(type) ? type : [type];
@@ -32,8 +39,18 @@ const SideBySide = ({ className, children, type }) => {
     )
   );
 
+  const pageLayout = usePageLayout();
+
   return (
-    <div className={cx(className, styles.container)}>
+    <div
+      css={css`
+        @media (max-width: ${BREAKPOINTS[pageLayout]}) {
+          grid-template-columns: minmax(0, 1fr);
+          grid-gap: 0;
+        }
+      `}
+      className={cx(className, styles.container)}
+    >
       {sections.map(([left, right], idx) => (
         <Fragment key={idx}>
           <div className={cx({ [styles.spanColumns]: !rendersRightColumn })}>
diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
index 4d7fc524e..091d987a0 100644
--- a/src/components/SideBySide.module.scss
+++ b/src/components/SideBySide.module.scss
@@ -6,11 +6,6 @@
   p:last-child {
     margin-bottom: 0;
   }
-
-  @media (max-width: 1240px) {
-    grid-template-columns: minmax(0, 1fr);
-    grid-gap: 0;
-  }
 }
 
 .spanColumns {