// Force doctype to use empty attributes
doctype html 
// variables
.hero.fixie
  h1
.wrapper.fixie
  div.heading
    h2
  div.content
    p
View Compiled
// https://css-tricks.com/fun-tip-use-calc-to-change-the-height-of-a-hero-component
$breakpoints:(
  'small': 480px,
  'medium': 750px,
  'large':1200px
);
// @use bourbon/strip-unit
// @use include-media
//formula : minimalProp + (maxVal - minVal) * (viewportWidth - minView) / (maxView - minView)
@mixin fluid-propertie($propertie,$min:18px,$max:24px,$minView: map-get($breakpoints, 'small'),$maxView: map-get($breakpoints, 'large')){
  #{$propertie}: calc(#{$min} + ( #{strip-unit($max)} - #{strip-unit($min)})*(100vw - #{$minView})/(#{strip-unit($maxView)} - #{strip-unit($minView)}));
  
@include media('<=#{$minView}'){
    &{
      #{$propertie}: $min;
    }
  }
  @include media('>=#{$maxView}'){
    &{
      #{$propertie}: $max;
    }
  }
}


.hero{
  background-image: url(https://images.unsplash.com/photo-1505394033641-40c6ad1178d7);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  @include fluid-propertie(padding-bottom,350px,450px);
}
.hero h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  z-index:1;
  @include fluid-propertie(font-size,35px,40px);
}
h2{
  @include fluid-propertie(font-size,20px,30px);
}
p {
  @include fluid-propertie(font-size);
  line-height: 1.5;
  padding: 10px;
}

View Compiled
jQuery(function($){
  // fixie.init();
  
  
});
Run Pen

External CSS

  1. https://codepen.io/mistergraphx/pen/rmbgoY

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js
  2. https://codepen.io/mistergraphx/pen/rmbgoY