/* ========================================================= */
/* Modals
/* ========================================================= */

.modalBackdrop {
  background: rgba(35,31,32,0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--s3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 4;
}

.modal {
  background: var(--greige2);
  max-width: 58ch;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.modalOpen {
  overflow: hidden;
}

.modalHeader {
  padding: var(--s3);
  position: sticky;
  top: 0;
  background: var(--greige4);
  display: flex;
}

.modalBody {
  padding: var(--s3);
}

.modalClose {
  order: 1;
  margin-right: calc(0rem - var(--s2));
}

@media (min-width: 48em) {
  .modalHeader { padding: var(--s4); }
  .modalBody { padding: var(--s4); }
  .modalClose { margin-right: calc(0rem - var(--s3)); }
}