@charset "UTF-8";

@fonts-dir: "/fonts";
@images-dir: "/images";

@background: #fafafa;
@text: #212121;
@root-font-size: 14px;

@phone-width: 600px;

.include-font(@font-family, @font-name, @font-weight: normal, @font-style: normal) {
  @font-face {
    font-family: "@{font-family}";
    src:
        url("@{fonts-dir}/@{font-name}.woff2") format("woff2"),
        url("@{fonts-dir}/@{font-name}.woff") format("woff"),
        url("@{fonts-dir}/@{font-name}.ttf") format("truetype");

    font-weight: @font-weight;
    font-style: @font-style;
    font-display: block;
    unicode-range: U+00??, U+04??, U+20??, U+226?;
  }
}


.if-min-width(@target, @rules) {
    @media (min-width: @target) {
        @rules();
    }
}

.if-max-width(@target, @rules) {
    @media (max-width: @target) {
        @rules();
    }
}

.if-width(@target, @rules-min, @rules-max) {
    @media (min-width: @target) {
        @rules-min();
    }

    @media (max-width: @target) {
        @rules-max();
    }
}