/* ==========================================================================
 All global image related sass
 ========================================================================== */

/**
 * Preload images
 */

img
  opacity: 1
  +transition(opacity 300ms ease-out)

  &.preload
    opacity: 0

  &.content, &.stretch
    width: 100%

  &.cover
    object-fit: cover

/**
  * Used for divs with background-images
  */
.image-cover
  background-size: cover

/* Images on grid
   ========================================================================== */

.image-grid
  display: grid
  grid-template-columns: 1fr 1fr

  &.with-gaps
    grid-gap: 60px column(1)