.snappy-modal-area {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas: "top-left top-center top-right" "center-left center center-right" "bottom-left bottom-center bottom-right";
  grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
  grid-template-columns: auto minmax(0, 1fr) auto;
  z-index: var(--snappy-modal-z-index, 1000);
}
.snappy-modal-area.backdrop {
  transition: background-color 0.3s;
  background-color: var(--snappy-modal-backdrop-color, rgba(0, 0, 0, 0.5));
}

.snappy-modal-content {
  position: relative;
  z-index: 2;
  grid-area: var(--snappy-modal-content-position, center);
  align-self: center;
  justify-self: center;
  display: flex;
}

html.not-scroll {
  position: fixed;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}