@exadel/esl/modules/esl-media/core.css

Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components

esl-media {
  display: block;
}
esl-media .esl-media-inner {
  display: block;
  width: 100%;
}
esl-media .esl-media-inner:not(audio) {
  height: 100%;
}
esl-media iframe.esl-media-inner {
  border: 0;
}
esl-media.esl-media-bg {
  position: relative;
}
esl-media.esl-media-bg .esl-media-inner {
  z-index: -1;
  pointer-events: none;
}
esl-media.esl-media-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
esl-media[fill-mode='cover'],
esl-media[fill-mode='inscribe'] {
  position: relative;
  overflow: hidden;
  height: 100%;
}
esl-media[fill-mode='cover'] .esl-media-inner,
esl-media[fill-mode='inscribe'] .esl-media-inner {
  position: absolute;
  top: var(--esl-media-y-offset, 50%);
  left: var(--esl-media-x-offset, 50%);
  transform: translate(calc(var(--esl-media-x-offset, 50%) * -1), calc(var(--esl-media-y-offset, 50%) * -1));
  min-width: 1px;
  min-height: 1px;
}
esl-media:not([wide])[fill-mode='cover'] .esl-media-inner,
esl-media[wide][fill-mode='inscribe'] .esl-media-inner {
  width: auto;
  height: 100%;
}
esl-media:not([wide])[fill-mode='inscribe'] .esl-media-inner,
esl-media[wide][fill-mode='cover'] .esl-media-inner {
  width: 100%;
  height: auto;
}
esl-media.esl-media-top {
  --esl-media-y-offset: 0%;
}
esl-media.esl-media-bottom {
  --esl-media-y-offset: 100%;
}
esl-media.esl-media-left {
  --esl-media-x-offset: 0%;
}
esl-media.esl-media-right {
  --esl-media-x-offset: 100%;
}
.img-container > esl-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}