.modal {
  --modal-gutter: var(--space-s);
  --modal-width: 80%;
  --modal-max-width: 36rem;
  --modal-max-height: 27rem;
  --modal-padding: var(--space-m);

  container-type: inline-size;
  padding: 0;
  width: var(--modal-width);
  border: none;
  border-radius: var(--radius-m);

  max-width: min(
    calc(100svw - 2 * var(--modal-gutter)),
    var(--modal-max-width)
  );

  max-height: calc(100svh - 2 * var(--modal-gutter));

  > * {
    padding: var(--modal-padding);
  }
}

.modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}