Generated by SassMeister.com.

input.scss

@function vw($width) {
  @return 100 * $width / 1380 * 1vw;
}
@function vwM($width) {
  @return 100 * $width / 420 * 1vw;
}

$breakpoints: (
  'small': 767px,
  'medium': 1000px,
  'tablet': 1024px
);
@mixin below($breakpoint) {
  $value: map-get($breakpoints, $breakpoint);
  @if $value != null {
    @media (max-width: $value) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}
@mixin above($breakpoint) {
  $value: map-get($breakpoints, $breakpoint);
  @if $value != null {
    @media (min-width: $value) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Please make sure it is defined in `$breakpoints` map.";
  }
}

html {
    font-size: vwM(18);
}

.title {
    width: 100vw;
    overflow: hidden;
    font-size: vw(150);
    font-weight: bol;
    line-height: 1;
    letter-spacing: vw(-2.55);
    @include below(medium) {
        font-size: vwM(100);
    }
}

.c {
  position: relative;
  margin: 0 auto;
  &--1000 {
    width: vw(1000);
  }
}
.u-scroll-inner {
  padding: vwM(21) vwM(16) vwM(21) vwM(16);
}

output.css

html {
  font-size: 4.2857142857vw;
}

.title {
  width: 100vw;
  overflow: hidden;
  font-size: 10.8695652174vw;
  font-weight: bol;
  line-height: 1;
  letter-spacing: -0.1847826087vw;
}
@media (max-width: 1000px) {
  .title {
    font-size: 23.8095238095vw;
  }
}

.c {
  position: relative;
  margin: 0 auto;
}
.c--1000 {
  width: 72.4637681159vw;
}

.u-scroll-inner {
  padding: 5vw 3.8095238095vw 5vw 3.8095238095vw;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}