.modal-wrapper {
    pointer-events: none;
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh
}

.modal-wrapper.active {
    pointer-events: all
}

.modal-wrapper.active .modal-wrapper__overlay {
    opacity: 1
}

.modal-wrapper.active .modal-wrapper__content.side-modal {
    -webkit-transform: translateX(0);
    transform: translate(0)
}

.modal-wrapper.active .modal-wrapper__content.standart-modal {
    opacity: 1
}

.modal-wrapper__overlay {
    position: absolute;
    z-index: 21;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #0003;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    -webkit-transition: .5s cubic-bezier(.33,1,.68,1);
    transition: .5s cubic-bezier(.33,1,.68,1)
}

.modal-wrapper__content {
    -webkit-transition: .5s cubic-bezier(.33,1,.68,1);
    transition: .5s cubic-bezier(.33,1,.68,1)
}

.modal-wrapper__content.side-modal {
    position: absolute;
    z-index: 25;
    top: 0;
    right: 0;
    -webkit-transform: translateX(100%);
    transform: translate(100%);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 100%;
    background: #fff
}

.side-modal__wrapper {
    overflow: hidden scroll;
    height: 100%;
    max-height: 100%
}

.side-modal__close {
    position: absolute;
    z-index: 5;
    top: 1.25rem;
    right: 1.25rem;
    -webkit-transition: .5s cubic-bezier(.33,1,.68,1);
    transition: .5s cubic-bezier(.33,1,.68,1)
}

.side-modal__inner {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

.standart-modal {
    position: absolute;
    z-index: 22;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    opacity: 0;
    -webkit-transition: .5s cubic-bezier(.33,1,.68,1);
    transition: .5s cubic-bezier(.33,1,.68,1)
}

.standart-modal__wrapper {
    max-height: calc(100vh - 6.25rem)
}

.standart-modal__inner {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

.standart-modal__inner.modal-small {
    padding: 5rem 1.5rem 2.5rem;
    background: #fff
}

.standart-modal__inner.modal-big {
    width: 56.25rem;
    padding: 5rem 2.5rem 2.5rem;
    background: #fff
}

.standart-modal__inner.modal-large {
    padding: 10rem;
    background-color: #fff
}

@media (max-width: 1200px) {
    .standart-modal__inner.modal-large {
        padding:5rem 2.5rem
    }
}

.standart-modal__close {
    position: absolute;
    z-index: 5;
    top: 2.5rem;
    right: 2.5rem;
    -webkit-transition: .5s cubic-bezier(.33,1,.68,1);
    transition: .5s cubic-bezier(.33,1,.68,1)
}

.standart-modal__close svg {
    width: 1.25rem;
    height: 1.25rem
}

@media (max-width: 1200px) {
    .standart-modal__close {
        top:1rem;
        right: 1.5rem
    }
}

@media (max-width: 767px) {
    .standart-modal__close {
        top:.5rem;
        right: 1rem
    }
}