From adf0c9c60d5519bdf1b92d8944eeffe1d5010e05 Mon Sep 17 00:00:00 2001
From: Daniel Vinci <me@danielvinci.com>
Date: Fri, 30 Apr 2021 12:14:57 -0600
Subject: [PATCH] add extra padding to the bottom of tPCC on mobile

---
 src/components/TalkingPointContent.svelte | 24 +++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/TalkingPointContent.svelte b/src/components/TalkingPointContent.svelte
index f003c1d..712ba9e 100644
--- a/src/components/TalkingPointContent.svelte
+++ b/src/components/TalkingPointContent.svelte
@@ -1,9 +1,3 @@
-<div class="talkingPointContentContainer">
-  <div class="talkingPointContent">
-    <slot />
-  </div>
-</div>
-
 <style>
   .talkingPointContentContainer {
     width: 100%;
@@ -25,4 +19,22 @@
   :global(.talkingPointContent li:not(:last-child)) {
     margin-bottom: 1em;
   }
+
+  @media only screen and (max-device-width: 900px) and (orientation: portrait) {
+    .talkingPointContentContainer {
+      padding-bottom: 1em;
+    }
+
+    .talkingPointContentContainer .talkingPointContent {
+      padding-top: 0;
+      padding-left: 0;
+      max-width: 100%;
+    }
+  }
 </style>
+
+<div class="talkingPointContentContainer">
+  <div class="talkingPointContent">
+    <slot />
+  </div>
+</div>