Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com

pages/committee/members.tmpl

 title=Members | The Acceptable Ads Committee
 description=A list of all Representatives and supporting Members that make up the Acceptable Ads Committee.
 parent=committee/index
 custom=1
 
 {% block head %}
   <style>
     @media(min-width: 768px)
     {
       #committee-structure
@@ skipping 351 matching lines @@
   <section class="section">
     <h3 class="h2">{{ coalitions[id].title | translate("{{ id }}-heading", "heading") }}</h3>
     <p class="col-6">{{ coalitions[id].description | translate("{{ id }}-intro") }}</p>
     {% for group in coalitions[id].groups %}
       {{ group_list(group) }}
     {% endfor %}
   </section>
 {% endmacro %}
 
 <section class="container">
-  <div class="row">
+  <div class="row section">
     <div class="col-6">
       <h1>{{ "Members" | translate("members-heading", "heading") }}</h1>
       <hr>
       <p>{{ "The Acceptable Ads Committee is divided into three Coalitions, with each faction consisting of several Members. Each group includes a Representative and multiple supporting Members." | translate("members-intro-2") }}</p>
       <p>{{ "Below is a list of all current Representatives and supporting Members, broken down by Coalition." | translate("members-intro-2") }}</p>
     </div>
     <aside class="col-6">
       <img id="committee-structure" class="block" alt="{{ "Acceptable Ads Committee Structure" | translate("featured-image-alt", "Image alt text") }}" src="/img/png/blog/acceptable-ads-committee-structure.png" />
     </aside>
   </div>
 </section>
 
 <section>
 
   <div class="bg-accent">
     <h2 class="center h3 p-y-md m-a-md">{{ "Meet the Acceptable Ads Committee" | translate("committee-heading", "heading") }}</h2>
   </div>
 
   <div class="container">
     {% for coalition in ["for-profit", "expert", "user-advocate"] %}
       {{ coalition_section(coalition) }}
     {% endfor %}
   </div>
 
 </section>