.main-page-contact {
    & .main-page-contact-wrapper {
        gap: 54px;
        display: flex;
        align-items: center;
        flex-direction: column;

        margin: 54px 0;

        @media (max-width: 989px) {
            gap: 30px;

            margin: 30px 0;
        }
    }

    & .main-page-contact-title {
        justify-self: center;
    }

    & .form-contact {
        width: 100%;
        max-width: 850px;

        gap: 30px;
        display: flex;
        flex-direction: column;

        padding: 36px 54px 54px 54px;

        background-color: var(--Primary-Pop-yellow);

        border-radius: 30px;

        @media (max-width: 989px) {
            gap: 18px;

            padding: 24px var(--section-main-margin-side) 18px var(--section-main-margin-side);
        }

        & .form-contact-submit {
            width: 100%;

            & > input { width: 100%; }
        }

        & .form-contact-wrapper {
            gap: 24px;
            display: flex;
            align-items: center;
            flex-direction: column;

            & .form-contact-container {
                gap: 12px;
                display: flex;
                flex-wrap: wrap;

                width: 100%;

                & .form-contact-input {
                    flex: 1 0 100%;

                    &.form-contact-input--half { 
                        @media (min-width: 990px) { flex: 1 }
                    }

                    & > input,
                    & > textarea {
                        width: 100%;

                        padding: 18px 24px;

                        border-radius: 18px;
                        border: 2px solid var(--Secondary-Soft-dark-15);
                        background-color: var(--Others-White);

                        font-family: var(--font-family-paragraph);
                        font-size: var(--font-paragraph-large-size);
                        font-weight: 700;
                        font-style: normal;
                        line-height: var(--font-paragraph-large-line-height);

                        color: var(--Secondary-Soft-dark-50);

                        appearance: none;
                        -moz-appearance: none;
                        -webkit-appearance: none;

                        &:focus, &:not(:valid) {
                            outline: none;
                            color: var(--Secondary-Soft-dark-100);
                            border-color: inherit;
                        }

                        &:is(textarea) { height: 160px; }
                    }
                }
            }
        }
    }
}