.main{
    padding: 0 5%;

    .main-section{
        .section-article{
            display: flex;
            flex-direction: column;
            align-items: center;
            row-gap: 40px;

            .article-title{
                background-color: var(--colorFirst);
            }

            .article-form{
                width: 50%;
                display: flex;
                justify-content: center;
                margin-bottom: 20px;
                .form{
                    width: 100%;


                    .form-label,
                    .form-input,
                    .form-select,
                    .form-textarea,
                    .button{
                        width: 100%;
                        margin-bottom: var(--value10Px);
                    }

                    .form-label{
                        font-size: .9rem;
                    }

                    .form-input,
                    .form-select,
                    .form-textarea,
                    .button{
                        border: 1px solid var(--colorFirst);
                        border-radius: var(--value10Px);
                        padding: 8px;
                        outline: none;
                        transition: background-color .4s ease;
                        color: var(--colorSecond);
                        font-family: var(--fontBody);
                    }

                    .form-input:focus,
                    .form-select:focus,
                    .form-textarea:focus{
                        background-color: var(--colorBackGround);
                        border: 1px solid var(--colorBackGround);
                    }
                    .button{
                        margin-top: 20px;
                    }

                    .button:hover{
                        background-color: var(--colorFirst);
                        cursor: pointer;
                    }
                }
                
            }
        }
    }
}