main {
    gap: 128px;
}

section {
    & .section-title {
        font-size: 32px;
        text-transform: capitalize;
    }

    &.contact {
        display: flex;
        gap: 48px;

        height: fit-content;

        & .start {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 24px;

            width: 100%;

            font-size: 14px;

            & a {
                text-decoration: underline;
            }
        }

        & .end {
            display: flex;
            flex-direction: column;
            gap: 48px;

            width: 100%;
        }

        & form {
            display: flex;
            flex-direction: column;
            align-items: end;
            gap: 24px;

            & .input-group {
                display: flex;
                flex-direction: column;
                gap: 8px;

                width: 100%;

                & .input-title {
                    color: var(--stone-gray);
                    text-transform: capitalize;
                }

                & input {
                    display: flex;
                    align-items: center;

                    width: 100%;
                    height: 32px;

                    padding: 0 12px;
                    outline: none;
                    border-radius: 2px;
                    border: 1px solid var(--silk-gray);
                    background: transparent;
                    transition: .25s;

                    &:focus {
                        border-color: var(--black);
                        background: var(--white);
                    }

                    &::-webkit-inner-spin-button,
                    &::-webkit-outer-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    }
                }

                & textarea {
                    width: 100%;

                    padding: 7px 12px;
                    border-radius: 2px;
                    border: 1px solid var(--silk-gray);
                    outline: none;
                    width: 100%;
                    min-height: 32px;
                    resize: vertical;
                    background: transparent;
                    transition: .25s border, background;

                    &:focus {
                        border-color: var(--black);
                        background: var(--white);
                    }
                }
            }

            & button {
                border: none;
                background: none;
                cursor: pointer;
                font-size: 16px;
            }
        }

        & .border {
            width: 2px;
            height: auto;

            background: var(--silk-gray);
        }

        & .text-group {
            display: flex;
            flex-direction: column;
            gap: 24px;

            & .title {
                font-size: 64px;
            }

            & .subtitle {
                color: var(--stone-gray);
            }
        }

        & .button-group {
            display: flex;
            gap: 24px;

            & div {
                display: flex;
                align-items: center;

                height: 32px;

                padding: 0 12px;
                border: 1px solid var(--silk-gray);
                border-radius: 2px;
                transition: .25s;

                &:hover {
                    border-color: var(--black);
                    background: var(--white);
                }
            }
        }
    }
}