/* media.st.css */
@namespace "Media";

.root {
  -st-states:
    hasAspectRatio,
    isFillingContainer,
    isVideo,
    isLandscape,
    isPortrait,
    isSquare,
    mediaSize(enum(inset, outset, fullBleed));
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: cover;
}

.root:hasAspectRatio .img,
.root:hasAspectRatio .vid {
  position: absolute;
  top: 0;
  left: 0;
}

.root:isFillingContainer .img {
  /* This is not 0 because ChromeVox otherwise will ignore it. Other screenreaders are fine */
  opacity: 0.001;
}

.mediaContainer {
  position: relative;
  overflow: hidden;
}

.figure {}

.figcaption {}

.caption {}

.captionGroup {}

.copyright {}

.icon {}

.img,
.vid {
  width: 100%;
  height: auto;
  display: block;
  /* smooth loading */
  animation: blur 1s linear 0s;
}

@keyframes blur {
  0% {
    filter: blur(8px);
  }

  50% {
    filter: blur(4px);
  }
}