@import '../../style/common_mixin.css';

.cmp-player-content-wrapper{
  max-height: 100%;
  display: block;
  position: relative;
  height: 100%;
  .cmp-cnt-box{
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    position: relative;
    img{
      height: 100%;
      width: auto;
    }

  }
  .cmp-cnt-main{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }
}


[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {
  height: auto;
}
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}
