/**
  Create a block element, which preserves given aspect ratio
*/
@mixin block-with-aspect-ratio($aspect-ratio) {
  width: 100%;
  padding-bottom: percentage(1 / $aspect-ratio);
}

/**
  Just a helper
*/
@mixin image-block {
  display: block;
  margin: auto;
}

/**
  Create a style for *too-wide* image,
  e.g. image that is wider for the aspect ratio

  - Takes all the *vertical* space available
  - Presenving the aspect ratio
*/
@mixin image-too-wide {
  @include image-block;
  width: 100%;
  height: auto;
}

/**
  Create a style for *too-narrow* image,
  e.g. image that is too narrow for the aspect ratio

  - Takes all the *horizontal* space available
  - Presenving the aspect ratio
*/
@mixin image-too-narrow {
  @include image-block;
  height: 100%;
  width: auto;
}