:root{
/*   font-family: 'MS Gothic'; */
}

.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 > :is(img, video){
  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;
}

.viewer > table{
  border: 5px solid blue;
  max-width: 100%;
}

.viewer > table td{
  white-space: nowrap;
  border: 1px solid;
  overflow: hidden;
  text-overflow: ellipsis;
}


.viewer > table td[data-sort-dir='up']::after{
  content : '^'
}

.viewer > table td[data-sort-dir='dn']::after{
  content : 'v'
}

.viewer table img{
  width: 50px;
  height: 50px;
}

@container viewer ( width > 0 ){
  .viewer > table{
    width: 100cqw;
    min-height: 100cqh;
    min-width: 400px;
  }
  .viewer > table td:nth-child(1){
    width: 50px;
  }
  .viewer > table td:nth-child(2){
    min-width: max( calc( 100cqw - 350px - 10px ), 100px );
    max-width: calc( 100cqw - 350px - 10px );
  }
  .viewer > table td:nth-child(3){
    width: 100px;
  }
  .viewer > table td:nth-child(4){
    width: 200px;
  }
}