/* Image aspect ratio calculator */

@mixin image-aspect-ratio($width, $height) {
  overflow: hidden;

  &:before{
    width: 100%;
    padding-top: ($height / $width) * 100%;
    display: block;
    content: " ";
  }

  img {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
  }
}


/* Responsive breakpoints */

@mixin layout-xsmall {
  @media (max-width: #{$breakpoint-xsmall}) {
    @content;
  }
}

@mixin layout-small {
  @media (max-width: #{$breakpoint-small - 16px}) {
    @content;
  }
}

@mixin layout-medium {
  @media (max-width: #{$breakpoint-medium - 16px}) {
    @content;
  }
}

@mixin layout-large {
  @media (max-width: #{$breakpoint-large - 17px}) {
    @content;
  }
}

@mixin layout-xlarge {
  @media (min-width: #{$breakpoint-large - 16px}) {
    @content;
  }
}

@mixin layout-xsmall-and-up {
  @media (min-width: #{$breakpoint-xsmall - 300px}) {
    @content;
  }
}

@mixin layout-small-and-up {
  @media (min-width: #{$breakpoint-small - 300px}) {
    @content;
  }
}

@mixin layout-medium-and-up {
  @media (min-width: #{$breakpoint-small - 16px}) {
    @content;
  }
}

@mixin layout-large-and-up {
  @media (min-width: #{$breakpoint-medium - 16px}) {
    @content;
  }
}