From 110180e49f37a4d8ac3dd968f4fddf92959c7747 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Thu, 30 Jul 2020 12:58:02 -0700
Subject: [PATCH] chore: use emotion to style SideBySide

---
 src/components/SideBySide.js          | 21 +++++++++++++++++----
 src/components/SideBySide.module.scss | 13 -------------
 2 files changed, 17 insertions(+), 17 deletions(-)
 delete mode 100644 src/components/SideBySide.module.scss

diff --git a/src/components/SideBySide.js b/src/components/SideBySide.js
index 9e5a87a4e..72bc5ed2a 100644
--- a/src/components/SideBySide.js
+++ b/src/components/SideBySide.js
@@ -1,8 +1,6 @@
 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';
@@ -44,16 +42,31 @@ const SideBySide = ({ className, children, type }) => {
   return (
     <div
       css={css`
+        display: grid;
+        grid-template-columns: repeat(2, calc(50% - 0.5rem));
+        grid-gap: 1rem;
+
+        p:last-child {
+          margin-bottom: 0;
+        }
+
         @media (max-width: ${BREAKPOINTS[pageLayout]}) {
           grid-template-columns: minmax(0, 1fr);
           grid-gap: 0;
         }
       `}
-      className={cx(className, styles.container)}
+      className={className}
     >
       {sections.map(([left, right], idx) => (
         <Fragment key={idx}>
-          <div className={cx({ [styles.spanColumns]: !rendersRightColumn })}>
+          <div
+            css={
+              !rendersRightColumn &&
+              css`
+                grid-column: span 2;
+              `
+            }
+          >
             {left}
           </div>
           {rendersRightColumn && <div>{right}</div>}
diff --git a/src/components/SideBySide.module.scss b/src/components/SideBySide.module.scss
deleted file mode 100644
index 091d987a0..000000000
--- a/src/components/SideBySide.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.container {
-  display: grid;
-  grid-template-columns: repeat(2, calc(50% - 0.5rem));
-  grid-gap: 1rem;
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.spanColumns {
-  grid-column: span 2;
-}