.md-typeset img {
  display: block;
  margin: auto;
  margin-bottom: 3rem;
  background-color: var(--md-typeset-kbd-color);
  border-radius: 0.5rem;
  box-shadow: 0.4rem 0.4rem 1rem 0.05rem #3f5773;
  -webkit-box-shadow: 0.4rem 0.4rem 1rem 0.2rem #3f5773;
}
/* 
@media screen and (min-width: 10em) {
    iframe {
        height: 253px;
    
    }
}

@media screen and (min-width: 60em) {
    iframe {
        height: 468px;
    
    }
}
@media screen and (min-width: 80em) {
    iframe {
        height: 426px;
    }
} */

div.iframe {
  position: relative;
  width: 100%;
  height: 0px;
  padding-bottom: 56.2%;
  margin: auto;
  margin-bottom: 3rem;
}

iframe {
  width: 100%;
  height: 488px;
  border-style: none;
  allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
  border-radius: 0.5rem;
  box-shadow: 0.4rem 0.4rem 1rem 0.05rem #3f5773;
  -webkit-box-shadow: 0.4rem 0.4rem 1rem 0.2rem #3f5773;
}

div.iframe > iframe {
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
  }