b-sides.html

---
layout: page
title: Selected work
hero-bg: rgba(255, 255, 255, 100)
thumbnail: thumbnail-ben.png
tagline: Less words, more pictures? Here you go. 🌈
permalink: /selected-work/
---

{% assign cases = site.bsides | sort: "order" %}
{% for case in cases %}

    <article class="mw8 mt4 center mb4 mb6-ns pa3">
        <header class="cf mb4">
            <section class="fl w-100 w-50-ns pr4 mb4">
                <h2 class="f2 mt0 mb2">{{ case.title }}</h2>
                <p class="f-tiny ttu tracked black-80 mb4">{{ case.role }}</p>
                <a href="{{ case.link }}" class="f5 bold {{ case.color }}">Visit Website</a>
            </section>
            <section class="fr w-100 w-50-ns">
                <p class="black-80 lh-copy f5 mt0">{{ case.description }}</p>
            </section>
        </header>
        <section>
            <figure class="mh0">
                <img src="{{ site.url }}/assets/img/{{ case.img_1x }}"
                srcset="{{ site.url }}/assets/img/{{ case.img_1x }} 1x,
                {{ site.url }}/assets/img/{{ case.img_2x }} 2x"  
                class="db center">
            </figure>
        </section>
    </article>

{% endfor %}