@font-face {
  font-family: 'Knewave';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Knewave-Light.woff) format('woff');
}

@mixin montserrat($style, $weight, $file) {
    @font-face {
      font-family: 'Montserrat';
      font-style: $style;
      font-weight: $weight;
      src: url(/fonts/#{$file}.woff2) format('woff2');
    }
}

@include montserrat(normal, 700, "Montserrat-Bold");
@include montserrat(italic, 700, "Montserrat-BoldItalic");
@include montserrat(normal, 400, "Montserrat-Regular");
@include montserrat(italic, 400, "Montserrat-Italic");
@include montserrat(normal, 300, "Montserrat-Light");
@include montserrat(italic, 300, "Montserrat-LightItalic");

body {
    font-family: "Montserrat", sans-serif;
    font-size: var(--fz-4);
    font-size: var(--fz-4);
    color: var(--color-text);
    line-height: 1.4;
}

h1 {
    margin: 0 0 var(--space-medium) 0;

    font-family: 'Knewave';
    font-size: var(--fz-1);
    font-weight: bold;
    text-transform: uppercase;
}

h2 {
    margin: 0 0 var(--space-medium) 0;

    font-family: 'Knewave';
    font-size: var(--fz-2);
    font-weight: bold;
    text-transform: uppercase;
}

h3 {
    margin: 0 0 var(--space-medium) 0;

    font-size: var(--fz-3);
    font-weight: bold;
}

h4 {
    margin: 0 0 var(--space-medium) 0;

    font-size: var(--fz-4);
    font-weight: bold;
}

p {
    margin: 0 0 var(--space-medium) 0;
}

a {
    color: var(--color-link);
}

@media ($mobile-breakpoint) {
    h1, h2, h3 {
        margin: 0 0 var(--space-medium) 0;
    }
}