@import "settings.colors";

// Image container

.c-image-container--ratio-32 {
  padding-bottom: 66.666666666%; // 3:2
}

// Lays image container

.c-image-container--lazy {
  position: relative;
  overflow: hidden;
}
.c-image-container--lazy__wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: $color-stone-200;
}
// for transparent images, we don't want to colour the bg
.c-image-container--lazy__wrapper--transparent {
  background-color: transparent;
}

// Responsive image. Fills parent width while maintaining aspect ratio.
// Max-width and min-width can be applied to the parent element.

.c-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

// Lazy-loaded images
// See: https://github.com/aFarkas/lazysizes
// See: patterns/javascripts/lazysizes-config.js

.js-lazyimage, // This class exists in the markup
.js-lazyimage--autosizes { // LazySizes replaces the above class with this one
  opacity: 0;
  transition: opacity 500ms;
}
.js-lazyimage--loaded {
  opacity: 1;
}
