_popup.sass

.overlay
  display: none
  justify-content: center
  align-items: center
  position: fixed
  top: 0
  left: 0
  bottom: 0
  right: 0
  width: 100%
  height: 100vh
  z-index: 1000
  overflow-y: auto
  background: rgba(0, 0, 0, 0.5)
  backdrop-filter: blur(3px)
  animation: fadeIn 300ms ease-in-out
  &-open
    display: flex
  .popup
    position: fixed
    width: 60%
    left: 50%
    top: 50px
    width: 720px
    transform: translateX(-50%)
    margin: auto
    &-container
      width: 100%
      margin: 0 auto
      .main-form
        width: 60%
        margin: auto
    &-close
      position: absolute
      right: 17%
      top: -40px
      font-size: 35px
      color: #fff
      font-weight: 300
      cursor: pointer
      &:hover
        color: $button-color

@keyframes fadeIn
  from
    opacity: 0

  to
    opacity: 1

@media screen and ( max-width: 768px )
  .overlay
    .popup
      &-container
        .main-form
          width: 40%
          padding: 10px 10px
          .form__title
            font-size: 16px
            margin-bottom: 20px
          .form__input
            padding-top: 10px
            padding-bottom: 10px
          &__textarea
            margin-bottom: 10px
          .form__text_small
            font-size: 10px
      &-close
        right: 29%