:root {
  --img-frame-bg: #eee;
  --img-frame-shadow: inset 0 0 5px #ccc;
  --img-zoomin-size: 1.2;
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-responsive-wrapper img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.img-frame-bg {
  background: var(--img-frame-bg);
}
.img-frame-shadow {
  box-shadow: var(--img-shadow);
}
.img-frame img {
  height: auto;
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.img-filled {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
img.img-filled {
  object-fit: cover;
}
*.img-zoomin {
  transition: all 0.5s ease-out;
}
*.img-zoomin:hover {
  transform: scale(var(--img-zoomin-size));
}