dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

dialog[open] {
  animation: centered-dialog-in .2s ease both;
}

@keyframes centered-dialog-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 560px) {
  dialog {
    margin: 0;
  }

  dialog[open] {
    animation-name: centered-dialog-mobile-in;
  }
}

@keyframes centered-dialog-mobile-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 20px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  dialog[open] { animation: none; }
}