Модуль «popup-help». Часто используемая структура попапа с контактами

Демо:

https://codepen.io/ildar-meyker/pen/poGMqJb

Плагины:

Подключение:

//

Разметка:

//
<aside class="popup popup-help mfp-hide mfp-with-anim" id="popup-help">
    <h2 class="popup-help__h1">
        Остались вопросы или<br class="d-sm-none" />
        нужна консультация?
    </h2>
    <div class="popup-help__desc">Заполните форму и мы с вами свяжемся!</div>
    <div class="popup-help__form">
        <div class="form-default">
            <div class="form-default__item form-default__item--50">
                <label>Имя <span>*</span></label>
                <div class="input-default">
                    <input type="text" placeholder="Иван" required />
                </div>
            </div>
            <div class="form-default__item form-default__item--50">
                <label>Фамилия <span>*</span></label>
                <div class="input-default">
                    <input type="text" placeholder="Романов" required />
                </div>
            </div>
            <div class="form-default__item form-default__item--50">
                <label>Почта <span>*</span></label>
                <div class="input-default">
                    <input type="text" placeholder="Qwerty@mail.ru" required />
                </div>
            </div>
            <div class="form-default__item form-default__item--50">
                <label>Телефон <span>*</span></label>
                <div class="input-default">
                    <input
                        type="tel"
                        placeholder="+7 ( ___ ) ___-__-__"
                        required
                        class="js-phone"
                    />
                </div>
            </div>
            <div class="form-default__item">
                <label>Введите ваш запрос </label>
                <div class="input-default">
                    <textarea rows="5" placeholder="Текст вопроса"></textarea>
                </div>
            </div>
        </div>
    </div>
    <div class="popup-help__footer">
        <button class="btn-default w-100">Отправить заявку</button>
    </div>
</aside>

Стили:

//


// popup.scss

.popup {
    

    .mfp-close {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #edf1f9;
        border-radius: 50%;
        top: 3.4rem;
        right: 4rem;
        width: calc(56 / 20) + em;
        height: calc(56 / 20) + em;
        background: #fff;
        opacity: 1;
        font-size: 2rem;
        color: #000;

        &:hover {
            border-color: darken(#edf1f9, 5%);
        }
    }
}

@media (max-width: 999.98px) {
    .popup {
        .mfp-close {
            top: 2rem;
            right: 2rem;
            font-size: 1.4rem;
        }
    }
}

// popup-help.scss

.popup-help {
    position: relative;
    padding: 4rem;
    border-radius: 2rem;
    background: #fff;
    max-width: 78rem;
    margin: 0 auto;

    &__h1 {
          font-family: "Inter";
        font-size: 4.8rem;
        font-style: normal;
        font-weight: 900;
        line-height: 115%;
        letter-spacing: -0.112rem;
        text-transform: uppercase;
        margin-bottom: 2rem;
    }
    &__desc {
        font-size: 1.8rem;
    }

    &__form {
        margin: 4rem 0;
    }

    .mfp-close {
        top: 0;
        right: -6.6rem;
    }
}

@media (max-width: 999.98px) {
    .popup-help {
        margin: 7.6rem auto;
        border-radius: 1.2rem;
        padding: 1.6rem;

        &__h1 {
            margin-bottom: 0.8rem;
            font-size: 2rem;
        }

        &__desc {
            font-size: 1.2rem;
        }

        &__form {
            margin: 3rem 0 2rem 0;
        }

        .mfp-close {
            top: -6rem;
            right: -1.8rem;
        }
    }
}

// form-default.scss



.form-default {
  
    --color-requred: #899ab7;
    --y-gap: 2rem;
    --x-gap: 1.2rem;
  
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--x-gap) / -2);
    gap: var(--y-gap) 0;

    &__item {
        padding: 0 calc(var(--x-gap) / 2);
        flex: 0 0 auto;
        width: 100%;

        &--50 {
            width: 50%;
        }

        &--33 {
            width: 33.33%;
        }

        label {
            margin-bottom: 1.2rem;
            display: block;
            font-size: 1.8rem;

            span {
                color: var(--color-required);
            }
        }
    }
}

@media (max-width: 999.98px) {
    .form-default {
        &__item {
            &--50 {
                width: 100%;
            }

            &--33 {
            }

            label {
                margin-bottom: 0.4rem;
                font-size: 1.2rem;

                span {
                }
            }
        }
    }
}

// input-default.scss

.input-default {
    input,
    textarea {
        transition: border-color 0.2s;
        width: 100%;
        padding: 0 1.2em;
        height: 6rem;
        background: #fff;
        border: 1px solid rgba(0, 71, 186, 0.5);
        border-radius: 1.2rem;
        font-size: 1.8rem;
        line-height: 1.2;
        color: #21222e;

        &::placeholder {
            color: #899ab7;
        }

        &:focus {
            border-color: #0047ba;
        }
    }

    textarea {
        padding: 1.8rem 1.9rem;
        height: auto !important;
    }
}
@media (max-width: 999.98px) {
    .input-default {
        input,
        textarea {
            height: 4.8rem;
            border-radius: 0.8rem;
            font-size: 1.4rem;

            &::placeholder {
            }
        }
    }
}


// btn-default.scss

.btn-default {
    @extend .reset-btn;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 20rem;
    border: 1px solid transparent;
    padding: 0 4rem;
    height: 6rem;
    border-radius: 1.2rem;
    background: #0047ba;
    font-size: 1.8rem;
    line-height: 1.2;
    text-align: center;
    color: #fff;

    &:hover {
        background: lighten(#0047ba, 5%);
    }

    &--gray {
        background: #eff1f4;
        color: #21222e;

        &:hover {
            background: lighten(#eff1f4, 1%);
        }
    }

    &--white {
        background: #fff;
        color: #21222e;

        &:hover {
            background: lighten(#eff1f4, 1%);
        }
    }
}

@media (max-width: 999.98px) {
    .btn-default {
        width: 100%;
        font-size: 1.4rem;
        border-radius: 0.8rem;
        height: 4.8rem;
        padding: 0 2rem;
    }
}

Инициализация:

//