Generated by SassMeister.com.

SassMeister-input.html

<div class="wrap">
    <div class="content">
      <h1>This is Chapparal</h1>
      <h2>Created by Adobe type designer Carol Twombly, Chaparral combines the legibility of slab serif designs popularized in the 19th century with the grace of 16th-century roman book lettering. By Adobe</h2>

      <div class="text">
        <div class="text__child">
          <p>
            The result is a versatile, hybrid slab-serif design, a unique addition to the Adobe Originals family of typefaces. Unlike “geometric” slab serif designs, Chaparral has varying letter proportions that give it an accessible and friendly appearance in all weights from light to bold.
          </p>
        </div>
        <div class="text__child--right">
          <p>
            Like the drought-resistant brush that blooms on the arid coastal range near Twombly’s California home, Chaparral’s highly functional design is surprisingly beautiful. Source: adobe.com
          </p>
        </div>
      </div>


      <h3>About the designer: Carol Twombly</h3>

      <div class="text">
        <div class="text__child">
          <p>
            American calligrapher and type designer, a graduate from Rhode Island School of Design where her professor was Charles Bigelow. Joined the digital typography program at Stanford University, also under Bigelow. Working from the Bigelow & Holmes studio she designed Mirarae, which won her the 1984 Morisawa gold prize. Since 1988 she has been a staff designer at Adobe.
          </p>
        </div>

        <div class="text__child--right">
          <p>
            During the 1994 ATypI conference in San Francisco, she was awarded the prestigious Prix Charles Peignot, given (occasionally) to outstanding type designers under the age of 35. Source: myfonts.com
          </p>
        </div>
      </div>

      <h3>About the designer: Carol Twombly</h3>

      <div class="text">
        <div class="text__child">
          <p>
            In its natural regime, chaparral is characterized by infrequent fires, with intervals ranging between 10–15 years to over a hundred years. Mature chaparral (stands that have been allowed greater intervals between fires) is characterized by nearly impenetrable, dense thickets (except the more open chaparral of the desert). These plants are highly flammable. They grow as woody shrubs with hard and small leaves; are non-leaf dropping (non-deciduous); and are drought tolerant. After the first rains following a fire, the landscape is dominated by soft-leaved non-woody annual plants, known as fire followers, which die back with the summer dry period.
          </p>
        </div>
        <div class="text__child--right">
          <p>
            Similar plant communities are found in the four other Mediterranean climate regions around the world, including the Mediterranean Basin (where it is known as maquis), central Chile (where it is called matorral), South African Cape Region (known there as fynbos), and in Western and Southern Australia (as kwongan). According to the California Academy of Sciences, Mediterranean shrubland contains more than 20% of the world’s plant diversity. The word chaparral is a loan word from Spanish chaparro, meaning both “small” and “dwarf” evergreen oak, which itself comes from the Basque word txapar, with exactly the same meaning.
          </p>
          <p>
            Conservation International and other conservation organizations consider the chaparral to be a biodiversity hotspot – a biological community with a large number of different species – that are under threat by human activity. Source: Wikipedia
          </p>
        </div>
      </div>
    </div>
  </div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----
@import "normalize-scss";
@import "susy";
@import "breakpoint";

/**
 * Clearfix for IE8 and up
 * http://css-tricks.com/snippets/css/clear-fix/
 */
 @mixin cf {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// Global Settings
$susy: (
  output: isolate,
  global-box-sizing: border-box,
  debug: (image: show)
  );

$small: (
  columns: 1 6.85714,
  gutter: 10 / 42,
  column-width: 42px
  );

$med: (
  columns: 1 1.62963 6.85185 1,
  gutter: 12 / 54,
  );


$large: (
  columns: 4.2233 1 2.49515 4.03883 2.5534,
  gutter: 32 / 103,
  );

// Global Border Box
@include border-box-sizing;

// Updating Global Susy Settings with $small map initially
@include layout($small);

.wrap {
  @include container;
  @include susy-breakpoint(530px, $med) {
    max-width: 100%;
    @include show-grid;
  }

  @include susy-breakpoint(700px, $large) {
    @include show-grid;
  }
}

.content {
  @include cf;
  @include susy-breakpoint(530px, $med) {
    @include span(2 at 2);
  }

  @include susy-breakpoint(700px, $large) {
    @include span(3 at 2);
  }
}

// Body Text
.text {
  h2 + & {
    @include span(2 first);
  }
  h3 + & {
    @include span(1 last);
  }

  @include breakpoint(530px) {
    $columns: map-get($med,columns);
    @include nested(2 of $columns at 2) {
      h2 + &, {
        @include span(2 first);
      }
      h3 + & {
        @include span(1 last);
      }
    }
  }
}

h3 {
  clear: both;
}

// Taking care of CSS

body {
  font-family: 'Chaparral Pro', serif;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.75;
  padding: 14.723624851955172% 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: 7.5vw;
  font-style: italic;
  line-height: 1;
  margin-bottom: 1ex;
}

h2 {
  font-size: 3ex;
  margin-bottom: 2ex;
}

h3 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8ex 0 0;
}