.img {
  max-width: 100%;
  width: 100%;
  display: block;
}

.picture {
  width: 100%;
}

@media #{$mobile-only} {
  .hide-mobile-image {
    display: none;
  }
}

@media #{$tablet-only} {
  .hide-tablet-image {
    display: none;
  }
}

// For lazyload
// https://github.com/aFarkas/lazysizes
// fade image in after load
// stylelint-disable selector-pseudo-class-no-unknown
:global {
  .lazyload,
  .lazyloading {
    display: block;
    opacity: 0;
    width: 100%;
  }

  .lazyloaded {
    display: block;
    opacity: 1;
    transition: opacity 100ms;
    width: 100%;
  }
}