<div class="wrapper">
  <div class="panel">
      <h1>Some title in here</h1>
  </div>
  <div class="panel">
      <h2>Some title in here</h2>
  </div>
</div>
@import "bourbon"
=responsive-font($responsive, $min, $max: false)
  $responsive-unitless: $responsive / ($responsive - $responsive + 1)
  $min-breakpoint: $min / $responsive-unitless * 100

  @media (max-height: #{$min-breakpoint})
    font-size: $min

  @media (max-width: #{$min-breakpoint})
    font-size: $min
  
  @media (max-width: #{$min-breakpoint}) and (max-height: #{$min-breakpoint})
    font-size: $min
  
  @if $max
    $max-breakpoint: $max / $responsive-unitless * 100
  
    @media (min-width: #{$max-breakpoint}) and (min-height: #{$max-breakpoint})
      font-size: $max

  font-size: $responsive
  
h1
  +responsive-font(5vmin, 20px, 100px)
  
h2
  +responsive-font(2vmin, 14px, 50px)
  
.wrapper
  +display(flex)
  +flex-wrap(wrap)
  max-width: 980px
  margin: 0 auto
  .panel
    margin: 0 10px
    background-color: #efefef
    height: 400px
    width: calc(50% - 20px)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.