.modal {
  display: none;
  background: #000000a8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  z-index: 10;

  &__wrapper {
    margin: 100px auto auto;
    background: white;
    width: 428px;
    padding: 24px 24px;
    position: relative;
    text-align: center;
    border-radius: 8px;

    &__img {
      margin-bottom: 24px;

      img {
        height: auto;
        display: block;
        margin: auto;
      }
    }
  }
}

@media only screen and (max-width: 768px) {

  .modal {
    &__wrapper {
      margin: auto;
      position: relative;
      width: 90%;

      &__close {
        right: 0;
        top: -30px;
      }
    }
  }
}