@mixin screen($width, $type: min) {
  @if map_has_key($breakpoints, $width) {
    $width: map_get($breakpoints, $width);

    @if $type==max {
      $width: $width - 1px;
    }

    @media only screen and (#{$type}-width: $width) {
      @content;
    }
  }
}

@mixin ratio($x,$y, $pseudo: false) {
  $padding: unquote(($y/$x) * 100 + '%');

  @if $pseudo {
    &::before {
      @include pseudo($pos: relative);

      width: 100%;
      padding-top: $padding;
    }
  }

  @else { padding-top: $padding; }
}

@mixin fill-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  width: 0;
  min-width: 100%;
  min-height: 100%;
}

@mixin font-face($name, $style, $weight, $fontname) {
  $path: '../fonts/';

  @font-face {
    font-family: $name;
    font-style: $style;
    font-weight: $weight;
    src: url($path + $fontname + '.eot');
    src:
      url('' + $path + $fontname + '.eot?#iefix') format('embedded-opentype'),
      // url('' + $path + $fontname + '.otf') format('opentype'),
      url('' + $path + $fontname + '.woff2') format('woff2'),
      url('' + $path + $fontname + '.woff') format('woff'),
      url('' + $path + $fontname + '.ttf') format('truetype'),
      url('' + $path + $fontname + '.svg#' + $fontname) format('svg');
  }
}