Spacing around speakers

source/_includes/front-speakers.html.twig

@@ -1,7 +1,8 @@
-<section id="speakers">
+<section id="speakers" class="tw-w-full sm:tw-max-w-5xl tw-mx-auto tw-text-center tw-my-12 md:tw-my-24">
+    <div class="tw-px-4">
         <h2 class="tw-text-3xl md:tw-text-4xl tw-font-bold tw-mb-10">Featuring Talks From</h2>
 
-    <div class="text-left tw-px-12">
+        <div class="text-left sm:tw-px-12">
             <ul class="tw-list-reset tw-flex tw-flex-wrap tw--mx-4 tw--mb-12">
                 {% for speaker in speakers %}
                     <li class="tw-w-full lg:tw-w-1/2 tw-text-left tw-mb-6">
@@ -12,6 +13,7 @@
                                     {% include 'speaker-role' with { speaker: speaker } %}
                                 </span>
                             </span>
+
                             <span class="tw-w-24 md:tw-w-32 tw-mr-6">
                                 <span class="tw-rounded-full tw-overflow-hidden tw-block tw-border-4 tw-border-solid tw-border-purple-500 group-hocus:tw-border-pink-500 tw-transition-border tw-transition-100">
                                     <img class="tw-block tw-w-full" src="/images/speakers/{{ speaker.image }}" alt="Photo of {{ speaker.name }}">
@@ -22,4 +24,5 @@
                 {% endfor %}
             </ul>
         </div>
+    </div>
 </section>

source/index.html.twig

@@ -41,9 +41,7 @@ use:
 {% endblock %}
 
 {% block footer_top %}
-<div class="tw-max-w-5xl tw-mx-auto tw-text-center tw-my-12 md:tw-my-24">
     {% include 'front-speakers' with {
         speakers: data.speakers,
     } %}
-</div>
 {% endblock %}