/*
Set images and videos to fit a certain way.
*/

// Cover both height and width
.embed-item-cover-xy{
  object-fit: cover;
  height: 100%;
}

// give priority to width
.embed-item-cover-x{
  height: auto !important;
}

// give priority to height
.embed-item-cover-y{
  object-fit: contain;
  height: 100%;
  width: auto;
  max-width: none;
}

// Contain the image without distorting
.embed-item-contain{
  object-fit: contain;
}


// embed item has action
.embed-has-action{
  transition: all .3s ease-in-out;
  i,svg.svg-inline--fa{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    color: #fff;
    font-size: 1.5em;
    opacity: 0;
    transition: all .3s ease-in-out;
  }

  img{
    filter: brightness(100%);
    transition: all .3s ease-in-out;
  }

  &:hover{
    img{
      filter: brightness(75%);
      transition: all .3s ease-in-out;
    }
    i,svg.svg-inline--fa{
      opacity: 0.8;
      transform: translate(-50%, -50%) scale(1);
      transition: all .3s ease-in-out;
    }
  }
}