:root {
  --dialog-padding: 2.5rem 1.25rem;
}

.dialog {
  border: 0;
  padding: var(--dialog-padding);
  border-top-right-radius: 2.5rem;
  max-width: 45rem;
  width: calc(100% - var(--gutter-left) - var(--gutter-right));
  background-color: #ffffff;
}
.dialog[open] {
  display: flex;
  flex-flow: row wrap;
}
.dialogWrap {
  position: relative;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  max-height: calc(100vh - 16.875rem);
  max-height: calc(100dvh - 16.875rem);
  overflow: auto;
  margin: 0 0 1.875rem;
  flex: 1 0 100%;
}
.dialogWrap:focus {
  outline: 0;
}
.dialogTitle {
  grid-column: 1/4;
  grid-row: 2/3;
  margin: 0;
  text-align: left;
  color: #000000;
}
.dialogContent {
  grid-column: 1/4;
  grid-row: 3/4;
  margin: 1.25rem 0 0;
}
.dialogImage {
  width: 6.25rem;
  margin: 0 0 1.875rem;
}
.dialog img {
  grid-column: 1/2;
  grid-row: 1/2;
}
.dialog img:nth-of-type(2) {
  grid-column: 3/4;
}
.dialog .btn {
  position: relative;
  width: 100%;
  flex: 1 0 100%;
}
.dialog .btn.secondary {
  margin: 0.625rem auto 0;
}
.dialog .btn.secondary:hover {
  background: #ffffff;
}
.dialog .btn.secondary:focus-visible {
  background: #ffffff;
}
.dialog .btn:not(.secondary) {
  background: linear-gradient(180deg, #1159b0 0%, #2571cc 20.79%, #2571cc 50%, #2571cc 75.92%, #1159b0 100%);
}
.dialog::-webkit-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}
.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}