Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// Media Queries Breakpoints
$screen-xs-width: 480px;
$screen-sm-width: 768px;
$screen-md-width: 992px;
$screen-lg-width: 1200px;

// Extra small screen / phone
$screen-xs:                  $screen-xs-width !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
$screen-sm:                  $screen-sm-width !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
$screen-md:                  $screen-md-width !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
$screen-lg:                  $screen-lg-width !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;

// Grid System
$grid-columns:              12 !default;
$grid-gutter-width:         20px !default;

// Container Sizes
// Small screen / tablet aka. `$screen-sm-min` and up.
$container-tablet:             (720px + $grid-gutter-width) !default;
$container-sm:                 $container-tablet !default;

// Medium screen / desktop aka. `$screen-md-min` and up.
$container-desktop:            (940px + $grid-gutter-width) !default;
$container-md:                 $container-desktop !default;

// Large screen / wide desktop aka. `$screen-lg-min` and up.
$container-large-desktop:      (1140px + $grid-gutter-width) !default;
$container-lg:                 $container-large-desktop !default;

// Site min/max widths for .container
$site-max-width: 1024px;
$site-min-width: 320px;


$hfont: 'Helvetica W01',Helvetica,Arial,sans-serif;
$pfont: 'Helvetica W01',Helvetica,Arial,sans-serif;
$tfont: 'Trade Gothic W01',Helvetica,Arial,sans-serif;
$gfont: Georgia,Times,Times New Roman,serif;


@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}


// Max breakpoint
$max-breakpoint: 992;
// This could be one of your media query breakpoint variables
$wide-screen: "(min-width: #{$max-breakpoint}px)";
// Function
@function get-vw($target) {
  // 1 vw is equal to 1% of the viewport width
  $vw-context: ($max-breakpoint * .01) * 1px; // 1% viewport width
  @return ($target/$vw-context) * 1vw;
}
// Mixin
@mixin vw($size) {
  font-size: get-vw($size);
  // Prevent font-size from getting too big
  @media #{$wide-screen} {
    font-size: $size;
  }
}
// If the width of the viewport is 1025px or wider, the font size will remain at 72px. Otherwise, the value will adjust as 7.2vw.
//
// Example:
//
// .headline {
//   font-size: 4.5em; // Fallback
//   @include vw(72px);
// }

// Type Elements
.welcome {
  margin: 0;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;

  @media (min-width: $screen-sm-min) {
    text-align: right;
    letter-spacing: 0.4em;
    margin-bottom: 4rem;
    padding-right: 115px;
  }
}
.largest {
  margin: 0;
  font-family: $tfont;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  // @include font-size(8.1);
  @include font-size(8.1);
  @include vw(81px);

  @media (min-width: $screen-sm-min) {
    text-align: right;
    letter-spacing: 0.18em;
    margin-top: 5.8rem;
    margin-bottom: 7rem;
    // @include font-size(8.1);
    // @include vw(81px);
  }
}

SassMeister-output.css

.welcome {
  margin: 0;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .welcome {
    text-align: right;
    letter-spacing: 0.4em;
    margin-bottom: 4rem;
    padding-right: 115px;
  }
}

.largest {
  margin: 0;
  font-family: "Trade Gothic W01", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 81px;
  font-size: 8.1rem;
  font-size: 8.16532vw;
}

@media (min-width: 992px) {
  .largest {
    font-size: 81px;
  }
}

@media (min-width: 768px) {
  .largest {
    text-align: right;
    letter-spacing: 0.18em;
    margin-top: 5.8rem;
    margin-bottom: 7rem;
  }
}