@import "../../constants/index.scss";

.imageElementWrapper {
  display: inline-block;
  vertical-align: middle;
  animation: slide-up 0.5s ease-out;
  animation-delay: 0.2s;
  animation-fill-mode: both;
  opacity: 0;
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.imageWrapper {
  width: $width;
  min-width: $width;
  border-radius: $border-radius;
  overflow: hidden;
  transform: scale3d(1, 1, 1);
  transition: 0.5s cubic-bezier(0.175, 0.5, 0.12, 1);
}

.imageImage,
.imageImagePlaceholder {
  width: 216px;
  min-height: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: $border-radius;
  border: 1px solid $border-color;
  background-color: #fff;
  box-sizing: border-box;
}

.imageImagePlaceholder {
  display: flex;
  justify-content: center;
  align-items: center;
}

.imagePlaceholderIcon {
  width: 52px;
  height: 52px;
}