From 6c28f6db7d9da494908c7a7279d3a49408d44810 Mon Sep 17 00:00:00 2001
From: Robert Tyree <20293876+tyreer@users.noreply.github.com>
Date: Sun, 9 Aug 2020 19:47:44 +0100
Subject: [PATCH] fix: ensure two column layout only applies to wide viewports
 on podcast page. limit size of podcast logo to avoid very large logo size on
 wider viewports

---
 src/pages/podcasts.js          |  2 +-
 src/pages/podcasts.module.scss | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/pages/podcasts.js b/src/pages/podcasts.js
index 1e1755740..63a2f6549 100644
--- a/src/pages/podcasts.js
+++ b/src/pages/podcasts.js
@@ -13,7 +13,7 @@ const PodcastsPage = () => {
         <PageLayout.Header title="New Relic Podcasts" />
         <PageLayout.Content>
           <section className={cx(styles.section, styles.twoColumn)}>
-            <div>
+            <div className={styles.bodyText}>
               <p>
                 Sometimes we talk on the internet about some things. You
                 probably listen to some things on the internet sometimes. We're
diff --git a/src/pages/podcasts.module.scss b/src/pages/podcasts.module.scss
index 1b6ccb900..649d76c2f 100644
--- a/src/pages/podcasts.module.scss
+++ b/src/pages/podcasts.module.scss
@@ -6,12 +6,28 @@
 
 .twoColumn {
   display: grid;
-  grid-template-columns: repeat(2, calc(50% - 1rem));
   grid-gap: 2rem;
+  grid-template-columns: repeat(2, calc(50% - 1rem));
+
+  @media (max-width: 760px) {
+    grid-template-columns: 1fr
+  }
+}
+
+.bodyText {
+  @media (max-width: 760px) {
+    order: 1;
+  }
 }
 
 .img {
   width: 100%;
+  max-width: 350px;
+  margin: 0 auto;
+
+  @media (max-width: 760px) {
+    order: 0;
+  }
 }
 
 .player iframe {