.dialog {
  @apply tw-relative
    tw-font-body
    tw-bg-black tw-border-0 tw-rounded-3xl;
  padding: 15px !important;
  max-width: 100%;
  margin: 30px;
}

@screen sm {
  .dialog {
    padding: 30px 0 50px 0 !important;
    max-width: 468px;

    &.md {
      @apply tw-max-w-3xl tw-w-full;
    }

    &.lg {
      @apply tw-max-w-5xl tw-w-full;
    }
  }
}

.dialog h1 {
  margin-bottom: 1rem;
  text-transform: none;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.813rem;
  font-weight: 500;
}

.dialog button[data-close] {
  width: 38px;
  height: 38px;
  border-radius: 21px;
  border: 0;
  position: absolute;
  right: -29px;
  top: -27px;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cg transform='translate(2 2)' fill='none' stroke='%23707070' stroke-width='2'%3E%3Ccircle cx='19' cy='19' r='19' stroke='none'/%3E%3Ccircle cx='19' cy='19' r='20' fill='none'/%3E%3C/g%3E%3Cpath d='M25.333,7.048,23.285,5l-8.119,8.119L7.048,5,5,7.048l8.119,8.119L5,23.285l2.048,2.048,8.119-8.119,8.119,8.119,2.048-2.048-8.119-8.119Z' transform='translate(5.833 5.833)' fill='%23f4f4f4'/%3E%3Cpath d='M0,0H42V42H0Z' fill='none'/%3E%3C/svg%3E")
    center center no-repeat;
  background-size: 38px 38px;
  transition: opacity;
  will-change: opacity;
}
