Media
←Here is the basic media container. It’s size is defined by the outer layout and the media itself. Images without a set height and width will be resposnive, occupying 100% of the width and taking as much height, as needed.
Syntax:
.media
SCSS:
_media.scss
Image
A good programmer looks both ways before crossing a one-way street.
—Unknown
Text
<div class="grid gap_s collapse-p">
<div class="span-6">
<figure class="media">
<img src="//picsum.photos/800/450/?random" alt="Photo via picsum.photos">
<div class="text-mono mini-info">Image</div>
</figure>
</div>
<div class="span-6">
<figure class="media">
<blockquote class="text-serif text-italic pa_m">
<p class="text_xl">A good programmer looks both ways before crossing a one-way street.</p>
<p class="text_s ma-t_s">—Unknown</p>
</blockquote>
<div class="text-mono mini-info">Text</div>
</figure>
</div>
</div>