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

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

—Bill Gates

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">Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
        <p class="text_s ma-t_s">—Bill Gates</p>
      </blockquote>
      <div class="text-mono mini-info">Text</div>
    </figure>
  </div>
</div>