img [data-sizes='auto'] {
  display: block;
  width: auto;
}

[class^='ratio-'],
[class*=' ratio-'] {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: inherit;

  img,
  video {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .rounded {
    border-radius: $margin-normal;
  }

  &.ratio-3-2:after {
    content: '';
    height: 0;
    display: block;
    padding-bottom: percentage(2/3); //ex: w=480, h=320 : 320/480=0.6666666667*100 = 66.7% Ratio 3:2
  }

  &.ratio-16-9:after {
    content: '';
    height: 0;
    display: block;
    padding-bottom: percentage(9/16); //ex w=1920, h=1080 : 1080/1920=0.5625*100 = 56,25% Ratio 16:9
  }

  &.ratio-3-1:after {
    content: '';
    height: 0;
    display: block;
    padding-bottom: 37.54%; //ex w=626, h=235 : 235/626=0.375399*100 = 37.54% Ratio 3:1-ish
  }

  &.ratio-6-1:after {
    content: '';
    height: 0;
    display: block;
    padding-bottom: 17.97%; //ex w=612, h=110 : 110/612=0.1797*100 = 17.97% Ratio 6:1-ish
  }

  &.ratio-hotel-hero:after {
    content: '';
    height: 0;
    display: block;
    padding-bottom: 48.56%;
  }
}

.image-round {
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;

  img {
    display: block;
  }
}

.img-circle-wrapper {
  @extend .image-round;
}

figure {
  margin: 0;
}

// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
  @include img-responsive;

  &.fill {
    width: 100%;
  }
}

.lazyload {
  opacity: 0;
  transition: opacity .2s;
}

.lazyloading {
  opacity: 1;
}

.lazyloaded {
  opacity: 1;
  background: transparent;
}