<article class="lakeside {{class}}">
	{% if image %}
		<aside class="lakeside__media">
			{% include 'partials/images/thumbnail.twig' %}
		</aside>
	{% endif %}
	<div class="lakeside__body">
		<div class="lakeside__content">
			{% include 'partials/title/title.twig' with title %}
			{% if summary %}<p class="lakeside__summary long-primer">{{ summary }}</p>{% endif %}
		</div>
		<div class="lakeside__meta">
			{% include 'partials/lists/list-inline.twig' with listItems %}
		</div>
	</div>
	<a href="#" class="lakeside__link" aria-hidden="true" tabindex="-1">{{ title.title }}</a>
</article>

.lakeside {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
	&__media {
		img {
			max-width: 100%;
		}
	}
	&__body {
		display: flex; // to align meta at the bottom
		flex: 1 1 auto;
		flex-direction: column;
		justify-content: space-between;

		.link {
			// to position link over link overlay
			position: relative;
			z-index: 1;
		}
	}
		&__content {}
		&__meta {
			margin-top: 1rem;
		}
		&__summary {
			margin-top: 0.5rem;
		}

	&__link {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		overflow: hidden;
		text-indent: 200%;
		white-space: nowrap;
		z-index: 0;
	}
	
	/**
	 * Hero lakeside
	 */
	&--large {
		flex-direction: row;
	}
	&--large .lakeside {
		&__media {
			@extend .col-sm-8;
		}
		&__body {
			@extend .col-sm-4;
		}
	}

	/**
	 * Horizontal
	 */
	&--horizontal {
		flex-direction: row;
	}
	&--horizontal .lakeside {
		&__media {
			@extend .col-sm-5;
			+ .lakeside__body {
				@extend .col-sm-7;
			}
		}
	}
	// if inside col-xx-xx, remove side padding.
	div[class^="col-"] &--horizontal .lakeside {
		&__media {
			padding-left: 0;
		}
		&__body {
			padding-right: 0;
		}
	}
	
}

{
	"image": true,
	"title": {
		"class": "lakeside__title u-bold",
		"link": "#",
		"title": "Some longer title with seven short - Words"
	},
	"listItems": {
		"items": [
			{
				"icon": "time",
				"title": "20h"
			},
			{
				"link": {
					"src": "#",
					"title": "Boxing"
				}
			},
			{
				"icon": "comment-alt",
				"title": "108"
			}
		]
	}
}