{% assign person-id = include.person-id | default: 25 %}
{% assign person = site.data.people | where: "id", person-id %}
{% assign p = person[0] %}

<div class="card">
    <div class="card-body text-center">
        <div class="row row-xs mb-4">
            <div class="col-6 d-flex">
                <div class="media flex-fill rounded">
                    <a class="media-content" style="background-image: url({{ site.base }}/img/photos/6d35d9a2bd6c63c2.jpg)"></a>
                </div>
            </div>
            <div class="col-6">
                <div class="media media-2x1 mb-2 rounded">
                    <a class="media-content" style="background-image: url({{ site.base }}/img/phcarouselExampleIndicatorsotos/6f6e2ef709fef97a.jpg)"></a>
                </div>
                <div class="row row-xs">
                    <div class="col-6">
                        <div class="media rounded">
                            <a class="media-content" style="background-image: url({{ site.base }}/img/photos/6fe407b4b13bbcde.jpg)"></a>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="media rounded">
                            <a class="media-content" style="background-image: url({{ site.base }}/img/photos/7ce612d952e536b2.jpg)"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="mb-1">Landscape Photos</h4>
        <p class="mb-3 text-muted">Photos by {{ p.full_name }}</p>

        <div class="d-flex justify-content-around align-items-center">
            <div>
                {% include ui/icon.html icon="eye" class="mr-2" %}
                16K
            </div>
            {% include ui/avatar.html person=p size="md" %}
            <div>
                {% include ui/icon.html icon="image" class="mr-2" %}
                69
            </div>
        </div>
    </div>
</div>