fix: ensure two column layout only applies to wide viewports on podca…

…st page. limit size of podcast logo to avoid very large logo size on wider viewports

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

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 {