Wrap container with section for responsive padding

themes/chosto/layouts/_default/list.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+<div class="section">
   <div class="container is-max-widescreen">
     <main>
       {{ with .Content }}
@@ -8,12 +9,12 @@
         </div>
       </article>
       {{ end }}
-    <div class="columns is-multiline is-mobile">
+      <div class="columns is-multiline">
         <!-- Custom paginator with only blog posts -->
         {{ $paginator := .Paginate (where .Site.RegularPages "FirstSection.Section" "posts") }}
         {{ range $paginator.Pages }}
         {{ if (eq .FirstSection.Section "posts")}}
-      <div class="column is-one-third">
+        <div class="column is-variable is-one-third">
           {{ .Render "summary" }}
         </div>
         {{ end }}
@@ -22,4 +23,5 @@
       {{- partial "pagination.html" $paginator -}}
     </main>
   </div>
+</div>
 {{ end }}

themes/chosto/layouts/_default/single.html

@@ -1,6 +1,7 @@
 {{ define "main" }}
+<div class="section">
   <div class="container">
-  <div class="columns mt-5 is-variable is-mobile is-8">
+    <div class="columns mt-5 is-variable is-8">
       <!--
     If the current page is a blog post and belongs to a case, we will add a side menu
     with all other blog posts belonging to that case, emphasis to the current.
@@ -57,4 +58,5 @@
       </section>
     </div>
   </div>
+</div>
 {{ end }}

themes/chosto/layouts/_default/summary.html

@@ -1,7 +1,7 @@
 <div class="card has-equal-height mt-5">
   <div class="card-image">
-    <figure class="image is-4by3 mt-5">
-      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
+    <figure class="image is-5by3 mt-5">
+      <img src="https://bulma.io/images/placeholders/800x480.png" alt="Placeholder image">
     </figure>
   </div>
   <div class="card-content" style="height:100%;">