From ccc9a8e23f62f39c113c0dd8f7f1dd895532cb1f Mon Sep 17 00:00:00 2001
From: Elisa Anguita <elisa@free.law>
Date: Thu, 9 Jan 2025 21:39:49 -0300
Subject: [PATCH] feat(podcasts): improve app logos responsiveness

---
 cl/simple_pages/templates/podcasts.html | 26 ++++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/cl/simple_pages/templates/podcasts.html b/cl/simple_pages/templates/podcasts.html
index 5ae50784e8..b6f39d4218 100644
--- a/cl/simple_pages/templates/podcasts.html
+++ b/cl/simple_pages/templates/podcasts.html
@@ -51,14 +51,12 @@ <h2>How to Subscribe</h2>
 
 
   <h3>Using a Podcast App</h3>
-  <div class="row">
-    <div class="col-xs-12">
-      <p>Our podcasts are available in a number of music services and apps. To find our podcasts, just search for "CourtListener".
-      </p>
-    </div>
-    <div class="col-xs-1"></div>
-    <div class="col-xs-2">
-      <h4 class="text-center text-uppercase gray">iTunes</h4>
+  <p>
+    Our podcasts are available in a number of music services and apps. To find our podcasts, just search for "CourtListener".
+  </p>
+  <div class="flex justify-content-center" style="flex-wrap: wrap">
+    <div class="col-sm-2 col-xs-5" style="padding: 15px; max-width: 190px">
+      <h5 class="text-center text-uppercase gray">iTunes</h5>
       <a href="https://www.apple.com/itunes/">
         <img src="{% static "png/itunes.png" %}"
              alt="iTunes Logo"
@@ -67,8 +65,8 @@ <h4 class="text-center text-uppercase gray">iTunes</h4>
              width="200">
       </a>
     </div>
-    <div class="col-xs-2">
-      <h4 class="text-center text-uppercase gray">Google Music</h4>
+    <div class="col-sm-2 col-xs-5" style="padding: 15px; max-width: 190px">
+      <h5 class="text-center text-uppercase gray">Google Music</h5>
       <a href="https://play.google.com/music/">
         <img src="{% static "svg/play_music_triangle.svg" %}"
              alt="Google Play Logo"
@@ -78,8 +76,8 @@ <h4 class="text-center text-uppercase gray">Google Music</h4>
       </a>
     </div>
 
-    <div class="col-xs-2">
-      <h4 class="text-center text-uppercase gray">Pocket Casts</h4>
+    <div class="col-sm-2 col-xs-5" style="padding: 15px; max-width: 190px">
+      <h5 class="text-center text-uppercase gray">Pocket Casts</h5>
       <a href="https://pocketcasts.com">
         <img src="{% static "png/pocketcasts_200x200.png" %}"
              alt="Pocket Casts Logo"
@@ -89,8 +87,8 @@ <h4 class="text-center text-uppercase gray">Pocket Casts</h4>
       </a>
     </div>
 
-    <div class="col-xs-2">
-      <h4 class="text-center text-uppercase gray">PlayerFM</h4>
+    <div class="col-sm-2 col-xs-5" style="padding: 15px; max-width: 190px">
+      <h5 class="text-center text-uppercase gray">PlayerFM</h5>
       <a href="https://player.fm">
         <img src="{% static "png/playerfm_200x200.png" %}"
              alt="PlayerFM Logo"