tweak guide layouts

_src/_assets/styles/_page-guides.scss

@@ -69,10 +69,14 @@
         display: block;
         box-shadow: none;
         background-color: $brand-main-blue-dark;
-        padding: $spacer * 2;
+        padding: $spacer * 1.5;
         height: 100%;
         border-radius: $border-radius;
 
+        @media ($screen-sm) {
+            padding: $spacer * 3;
+        }
+
         &:before {
             opacity: .85;
         }
@@ -87,9 +91,21 @@
     }
 
     p:last-child,
-    .guide__title:only-child {
+    .guide__title:only-child,
+    .guide__tagline,
+    .grid {
         margin-bottom: 0;
     }
+
+    .section--guides & {
+        margin-bottom: $spacer * 2;
+
+        a {
+            @media ($screen-sm) {
+                padding: $spacer * 4;
+            }
+        }
+    }
 }
 
 .guide__title,

_src/_assets/styles/_sections/_section-blog.scss

@@ -20,8 +20,10 @@
     }
 }
 
-.article__title {
-    @extend .h5, .transition;
+.article__title,
+h1.article__title {
+    font-size: $font-size-h5;
+    font-weight: $font-weight-normal;
     margin: 0;
     color: #fff;
     position: relative;

_src/_includes/sections/section-guides.html

@@ -5,20 +5,18 @@
             <p class="section-description">Complete these guides to learn about how to create apps in BigchainDB.</p>
         </header>
     </div>
-    <div class="row row--wide">
-        <div class="grid grid--full grid-small--half grid--gutters">
+
+    <div class="row">
         {% for guide in site.guides limit: 4 %}
-            <div class="grid__col">
             <article class="guide">
                 <a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/guides/{{ guide.header }}')" {% endif %}>
                     <h1 class="guide__title">{{ guide.title }}</h1>
                     <p class="guide__tagline">{{ guide.tagline }}</p>
                 </a>
             </article>
-            </div>
         {% endfor %}
     </div>
-    </div>
+
     <div class="row text-center">
         <a class="btn btn-secondary" href="/guides/">All guides</a>
     </div>

_src/guides.html

@@ -5,7 +5,7 @@ title: Guides
 tagline: "These guides explain you how to get started and build apps with BigchainDB/IPDB"
 ---
 
-<section class="section section--guides">
+<section class="section section--guideslist">
     <div class="row row--wide">
         <div class="grid grid--full grid-small--half grid--gutters">
             {% for guide in site.guides %}