.viewer-container{
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 550px;
  height: 400px;
  border: 5px solid seagreen;
  
  max-width: 100%;
  
  resize: both;
  overflow: auto;
}

.viewer-info{
  position: absolute;
  display: block;
  box-sizing: border-box;
  left: 0;
  top:  0;
  width: 100%;
  height: 40px;
  border: 5px solid gray;
}

.viewer{
  position: absolute;
  display: block;
  box-sizing: border-box;
  left: 0;
  top: 40px;
  width: 100%;
  height: calc( 100% - 40px );
  border: 5px solid sienna;
  
  overflow: auto;
  container-name: viewer;
  container-type: size;
  
  padding: auto;
}

.viewer > *{
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.viewer > figure{
  width: 100%;
  height: 100%;
  border: 5px solid violet;
  margin: 0;
}

.viewer > figure > img{
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 1px solid violet;
  image-rendering: pixelated;
  
  left: 50%;
  top: 50%;
  transform: translate( -50%, -50% );
  max-width: 100%;
  max-height: 100%;
  
}

.viewer > figure > figcaption{
  position: absolute;
  display: none;
  box-sizing: border-box;
  border: 1px solid violet;
}

.viewer > figure:hover > figcaption{
  display: block;
}

.viewer > iframe{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 5px solid cornflowerblue;
}