Refactor experience, use flexbox

assets/sass/pages/_experience.sass

@@ -1,30 +1,34 @@
 .experience
     margin-bottom: $padding-large-vertical * 3
-    position: relative
     +clearfix
 
-    +breakpoint(max-width $screen-tablet)
-        h2
-            font-size: 1.5em
-            margin-top: 0
-
-    p:last-of-type
-        margin-bottom: 0
-
     &__website
         display: inline-block
         margin-bottom: 2px
 
     &__role
         color: $gray-light
-        margin-bottom: 10px
+        margin-bottom: .625rem
 
-.experience--with-logo
-    .experience
+    &__logo
+        margin-left: 1.5em
+        margin-top: 25px
+        max-width: 25%
+
+    img
+        height: auto
+        width: 100%
+
+    p:last-of-type
+        margin-bottom: 0
+
+    +breakpoint(30rem)
         &__logo
-            @extend .pull-right
-            margin: 0 0 0 2em
-            max-width: 20%
+            max-width: 15%
 
-            @include breakpoint($screen-md-min)
-                max-width: 15%
+.experience.has-logo
+    display: flex
+    justify-content: flex-start
+
+    .inner
+        flex: 1

source/_partials/experience-item.html.twig

@@ -0,0 +1,36 @@
+{% set classes = [
+    'experience',
+    company.logo ? 'has-logo',
+    experience.featured ? 'is-featured',
+] %}
+
+<div class="{{ classes|sort|join(' ') }}">
+    <div class="inner">
+        <h2>{{ company.name }}</h2>
+
+        {% if company.website %}
+            <a href="{{ company.website }}" class="experience__website">
+                {{ company.website }}
+            </a>
+        {% endif %}
+
+        <div class="experience__role">
+            {% spaceless %}
+                {{ experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') }}
+                {% if experience.location %}
+                    ({{ experience.location }})
+                {% endif %}
+            {% endspaceless %}.
+        </div>
+
+        <div class="experience__description">
+            {{ experience.description|raw }}
+        </div>
+    </div>{# /.inner #}
+
+    {% if company.logo %}
+        <div class="experience__logo">
+            <img src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
+        </div>
+    {% endif %}
+</div>

source/experience.html.twig

@@ -6,7 +6,7 @@ experiences:
       location: Cardiff, Wales
       role: Senior Drupal Developer
       start: May 2016
-      end: ~
+      featured: true
       description: |
           <p>Drupal website development.</p>
 
@@ -14,7 +14,7 @@ experiences:
       location: Remote
       role: 'Web Developer & System Administrator'
       start: 2007
-      end: ~
+      featured: true
       description: |
           <p>Working on Drupal and Symfony development, maintenance and support projects in my spare time.</p>
           <p>Administration of Debian, Ubuntu and CentOS servers, and configuration using Puppet, or more recently, Ansible.</p>
@@ -84,30 +84,8 @@ experiences:
 <h1>Experience</h1>
 
 {% for experience in page.experiences %}
-    {% set company = site.companies[experience.company] %}
-
-    <div class="experience experience--{{ company.logo ? 'with-logo' : 'no-logo' }}">
-        <h2 class="experience__title">{{ company.name }}</h2>
-
-        {% if company.website %}
-            <a href="{{ company.website }}" class="experience__website">{{ company.website }}</a>
-        {% endif %}
-
-        {% if company.logo %}
-            <img class="experience__logo" src="{{ site.images_url }}/assets/images/experience/{{ company.logo }}" alt="{{ company.name }} logo">
-        {% endif %}
-
-        <div class="experience__role">
-            {% spaceless %}
-                {{ experience.role ~ ' from ' ~ experience.start ~ ' to ' ~ experience.end|default('Present') }}
-                {% if experience.location %}
-                    ({{ experience.location }})
-                {% endif %}
-            {% endspaceless %}.
-        </div>
-
-        <div class="experience__description">
-            {{ experience.description|raw }}
-        </div>
-    </div>
+    {% include "experience-item" with {
+        experience: experience,
+        company: site.companies[experience.company]
+    } %}
 {% endfor %}