OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

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
Photo via picsum.photos
Image

You want it in one line? Does it have to fit in 80 columns?

—Larry Wall

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">You want it in one line? Does it have to fit in 80 columns?</p>
        <p class="text_s ma-t_s">—Larry Wall</p>
      </blockquote>
      <div class="text-mono mini-info">Text</div>
    </figure>
  </div>
</div>