@media (min-width: 0) {
    .pop-up {
        position: fixed;
        bottom: 0;
        color: #1f1c1a;
        background-color: #fff;
        width: 100%;
        padding: 15px 10px;
        border-radius: 10px 10px 0 0;
        z-index: 49;
        transform: translate(0, 200%);
        transition: all ease .4s;
    }
    .pop-up__title {
        font-size: 20px;
        font-family: 'GothamBook';
    }
    .pop-up__subtitle {
        font-size: 16px;
        color: #bc4f54;
        padding: 10px 0 0 0;
    }
    .pop-up__button {
        width: 100%;
        padding: 15px 20px;
        border-radius: 10px;
        margin: 15px 0 0 0;
        background-color: #3c2bf5;
        color: #fff;
        font-family: 'GothamBook';
    }
    .pop-up-show {
        transform: translate(0);
    }
}

@media (min-width: 480px) {
    .pop-up {
        width: 80%;
        left: 10%;
    }
}

@media (min-width: 640px) {
    .pop-up {
        width: 60%;
        left: 20%;
        padding: 25px 20px;
    }
}

@media (min-width: 958px) {
    .pop-up {
        width: 500px;
        left: 50%;
        padding: 25px 20px;
        margin: 0 0 0 -250px;
    }
}

@media (min-width: 1700px) {
    .pop-up {
        width: 600px;
        margin: 0 0 0 -300px;
        padding: 30px 35px;
    }
    .pop-up__title {
        font-size: 30px;
    }
    .pop-up__subtitle {
        font-size: 25px;
    }
    .pop-up__button {
        font-size: 25px;
    }
}