.ravioli__dialog {
  z-index: 2147483647;
  max-width: 720px;
  margin: auto;
  padding: 1.5rem;
  border-width: 0;
  background: #121212;
  color: var(--ravioli-text-color);
}

.ravioli__container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.ravioli__body-container {
  padding-top: 1rem;
}

.ravioli__dialog::backdrop {
  backdrop-filter: blur(8px);
  background-color: rgba(80, 80, 80, 0.6);
}

.ravioli__dialog:focus {
  outline: none;
}

.ravioli__pic-container {
  height: auto;
  align-self: stretch;
}

.ravioli__pic {
  min-width: 360px;
  width: 360px;
  height: 100%;
  object-fit: cover;
}

.ravioli__button_container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  column-gap: 2rem;
  row-gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}

.ravioli__button {
  padding: 1rem 1.5rem;
  cursor: pointer;
  width: 100%;
}

@media screen and (max-width: 620px) {
  .ravioli__dialog {
    max-width: 350px;
    height: 100vh;
  }

  .ravioli__container {
    flex-direction: column;
  }

  .ravioli__body-container {
    padding-top: 0rem;
  }

  .ravioli__pic-container {
    height: 300px;
    width: auto;
  }

  .ravioli__pic {
    min-width: 0px;
    width: 100%;
  }
}

@media screen and (max-width: 420px) {
  .ravioli__dialog {
    width: 100%;
    height: 100vh;
  }

  .ravioli__container {
    flex-direction: column;
  }

  .ravioli__body-container {
    padding-top: 0rem;
  }

  .ravioli__pic-container {
    height: 300px;
    width: auto;
  }

  .ravioli__pic {
    min-width: 0px;
    width: 100%;
  }
}