<input class="checkbox" type="checkbox">
<div class="box">
  <h1>Hello World!</h1>
</div>

.checkbox {
  display: block;
  height: 2em;
  margin: 1em;
  width: 2em;
}

@max: 1280px;
@mid: 960px;
@min: 640px;

.checkbox:checked + .box {
  h1 {
    @offset-top-max: 32px;
    @offset-top-min: 8px;
    @offset-h-max: 240px;
    @offset-h-min: 8px;

    .fluid-prop(margin-left, @offset-h-min, @min, @offset-h-max, @max);
    .fluid-prop(margin-right, @offset-h-min, @min, @offset-h-max, @max);
    .fluid-prop(margin-top, @offset-top-min, @min, @offset-top-max, @max);

    display: inline-block;
    margin: @offset-top-max @offset-h-max 0;
    position: relative;
    
    &:after {
      @height: 82px;

      .fluid-prop(height, 0, @mid, @height, @max);

      bottom: 0;
      color: deepskyblue;
      content: 'Hello World!';
      height: @height;
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;

      @media (max-width: @mid) {
        height: 0;
      }
    }

    @media (max-width: @min) {
      margin: @offset-top-min @offset-h-min 0;
    }
  }
}

.fluid-prop(@prop, @p-min, @w-min, @p-max, @w-max) {
    @p-k: unit((@p-max - @p-min)/(@w-max - @w-min));
    @p-b: @p-min - @p-k * @w-min;

    @media (min-width: @w-min) and (max-width: @w-max) {
      @{prop}: ~'calc(@{p-k} * 100vw + @{p-b})';
    }
}

h1 {
  @fz-max: 72px;
  @fz-mid: 48px;
  @fz-min: 32px;

  .fluid-prop(font-size, @fz-min, @min, @fz-mid, @mid);
  .fluid-prop(font-size, @fz-mid, @mid, @fz-max, @max);

  font-size: @fz-max;

  @media (max-width: @min) {
    font-size: @fz-min;
  }
}