<div class="wrap">
  <h1>Lorem ipsum dolor sit amet</h1>

  <p>Resize the page to view the subtle fluid change in font sizes and spacing.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis massa tincidunt dui ut ornare lectus sit amet. In eu mi bibendum neque. Neque convallis a cras semper auctor neque vitae tempus. Sagittis orci a scelerisque purus semper eget duis at tellus. Faucibus turpis in eu mi bibendum neque egestas congue. Volutpat lacus laoreet non curabitur gravida. Amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Metus aliquam eleifend mi in nulla. Cras fermentum odio eu feugiat pretium. Lorem ipsum dolor sit amet consectetur.</p>

  <q>Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Nibh sed pulvinar proin gravida hendrerit lectus.</q>
  
  <p>Scelerisque varius morbi enim nunc faucibus a pellentesque sit amet. Eu non diam phasellus vestibulum lorem sed risus ultricies. Ante metus dictum at tempor commodo. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin. At risus viverra adipiscing at. Nunc pulvinar sapien et ligula ullamcorper malesuada. Massa tempor nec feugiat nisl pretium fusce id. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Urna cursus eget nunc scelerisque viverra mauris in aliquam sem. Pellentesque diam volutpat commodo sed egestas. In ante metus dictum at tempor commodo ullamcorper a. Mattis rhoncus urna neque viverra justo nec ultrices. Cras tincidunt lobortis feugiat vivamus at augue eget arcu dictum. Volutpat commodo sed egestas egestas fringilla. In ornare quam viverra orci sagittis eu. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus.</p>

  <h2>Id velit ut tortor pretium viverra suspendisse adipiscing</h2>
  
  <p>Nulla at volutpat diam ut. Convallis aenean et tortor at risus viverra adipiscing at in. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Eu facilisis sed odio morbi quis. Aliquam sem et tortor consequat id. Nulla aliquet enim tortor at auctor urna. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Nibh sed pulvinar proin gravida hendrerit lectus. Lacus laoreet non curabitur gravida. In dictum non consectetur a erat. Curabitur vitae nunc sed velit dignissim sodales ut eu.</p>

  <p>Velit laoreet id donec ultrices tincidunt arcu. Ac tincidunt vitae semper quis lectus nulla at volutpat diam. Nisl rhoncus mattis rhoncus urna neque viverra justo nec. A cras semper auctor neque vitae tempus quam pellentesque nec. Eu sem integer vitae justo eget. Porttitor lacus luctus accumsan tortor. Ut consequat semper viverra nam. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper. Felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Donec enim diam vulputate ut pharetra sit amet. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget.</p>

  <p>Posuere morbi leo urna molestie at elementum eu. Lectus urna duis convallis convallis tellus id interdum velit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. A condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Vitae congue eu consequat ac felis donec. Ut morbi tincidunt augue interdum. Elementum nibh tellus molestie nunc non. Donec adipiscing tristique risus nec feugiat. At urna condimentum mattis pellentesque. Aliquet sagittis id consectetur purus ut faucibus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Amet nisl suscipit adipiscing bibendum est ultricies integer. Velit dignissim sodales ut eu sem. Lorem ipsum dolor sit amet consectetur. Turpis massa sed elementum tempus. Gravida dictum fusce ut placerat orci. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Augue lacus viverra vitae congue. Elit ullamcorper dignissim cras tincidunt lobortis.</p>
</div>

@mixin poly-fluid-sizing($property, $map) {
  // Get the number of provided breakpoints
  $length: length(map-keys($map));
  
  // Error if the number of breakpoints is < 2
  @if ($length < 2) {
    @error "poly-fluid-sizing() $map requires at least values"
  }

  // Sort the map by viewport width (key)
  $map: map-sort($map);
  $keys: map-keys($map);

  // Minimum size
  #{$property}: map-get($map, nth($keys,1));
  
  // Interpolated size through breakpoints
  @for $i from 1 through ($length - 1) {
    @media (min-width:nth($keys,$i)) {
      #{$property}: linear-interpolation((nth($keys,$i): map-get($map, nth($keys,$i)), nth($keys,($i+1)): map-get($map, nth($keys,($i + 1)))));
    }
  }
  
  // Maxmimum size
  @media (min-width:nth($keys,$length)) {
    #{$property}: map-get($map, nth($keys,$length));
  }
}

@function linear-interpolation($map) {
  $keys: map-keys($map);
  @if (length($keys) != 2) {
    @error "linear-interpolation() $map must be exactly 2 values";
  }
  // The slope
  $m: (map-get($map, nth($keys, 2)) - map-get($map, nth($keys, 1)))/(nth($keys, 2) - nth($keys,1));
  
  // The y-intercept
  $b: map-get($map, nth($keys, 1)) - $m * nth($keys, 1);
  
  // Determine if the sign should be positive or negative
  $sign: "+";
  @if ($b < 0) {
    $sign: "-";
    $b: abs($b);
  }
  
  @return calc(#{$m*100}vw #{$sign} #{$b});
}

@function list-sort($list) {
  $sortedlist: ();
  @while length($list) > 0 {
    $value: nth($list,1);
    @each $item in $list {
      @if $item < $value {
        $value: $item;
      }
    }
    $sortedlist: append($sortedlist, $value, 'space');
    $list: list-remove($list, index($list, $value));
  }
  @return $sortedlist;
}

@function map-sort($map) {
  $keys: list-sort(map-keys($map));
  $sortedMap: ();
  @each $key in $keys {
    $sortedMap: map-merge($sortedMap, ($key: map-get($map, $key)));
  }
  @return $sortedMap;
}

@function list-remove($list, $index) {
  $newList: ();
  @for $i from 1 through length($list) {
    @if $i != $index {
      $newList: append($newList, nth($list,$i), 'space');
    }
  }
  @return $newList;
}

// Control the "zoom" on the root level and linearly interpolate between the different "zoom points"
:root {
  @include poly-fluid-sizing(
    "font-size", (
      320px: 16px,
      1200px: 21px
    )
  );
}

// Use rem for all sizing
.wrap {
  max-width: 30rem;
  margin: 0 auto;
  padding: 0 1rem;
}

h1 {
  font-size: 2rem;
  margin: 1.5rem 0;
}

h2 {
  font-size: 1.4rem;
  margin: 1rem 0;
}

p {
  font-size: 1rem;
  margin: 1.5rem 0;
}

q {
  display: block;
  margin-left: 1rem;
  font-weight: bold;
  border-left: 0.2rem solid gray;
  padding-left: .5rem;
  font-size: 1.2rem;
}