aspect-ratio center box CSS

box.css

/* from Kevin Powell's [3 useful CSS tricks](https://www.youtube.com/watch?v=HOM47v73yG8)
 * for <div class=box></div>
 * useful for iframes, videos, pictures, etc.
 */

.box {
  width: 25rem;
  aspect-ratio: 1 / 1;
  position: fixed;
  inset: 0rem; /* sets top/bottom/left/right to same value */
  margin: auto; /* center in available space -- uses inset, width, and aspect-ratio to work */
}