.contact-02{
    --primary:hsl(240, 100%, 70%);
    
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    max-width:700px;

    > div{
        display:flex;
        flex-direction:column;
        gap:20px;
        padding:20px;

        span{
            font-size:1.3rem;
            color:var(--primary);
        }

        p{
            line-height:1.6;
            opacity:0.5;
            text-align:justify;
        }
    }

    .form{
        display:grid;
        grid-template-columns:1fr 1fr;
        padding:20px;
        border-left:1px solid grey;
        gap:20px;

        > input{
            justify-self:start;
            color:white;
            background-color:var(--primary);
            padding:15px;
            border-width:0;
            cursor:pointer;
        }
    }

    .form-field{
        display:flex;
        flex-direction:column;
        gap:15px;

        &:first-child{
            grid-column:1/2;
        }

        &:nth-child(2){
            grid-column:2/3;
        }

        &:not(:first-child, :nth-child(2)){
            grid-column:1/-1;
        }

        :first-child{
            padding-block:15px;
            font-size:inherit;
            color:grey;
            border-width:0;
            border-bottom:1px solid grey;
            font-family:inherit;

            &:focus{
                outline-width:0;
                border-bottom:1px solid var(--primary);
            }

            &::placeholder{
                color:grey;
            }
        }

        textarea{
            height:100px;
        }

        span{
            color:red;
            font-size:0.8rem;
            display:none;
        }
    }

}


@media(max-width:700px){

    .contact-02{
        grid-template-columns:auto;

        .form-field:first-child, .form-field:nth-child(2){
            grid-column:1/-1;
        }

        .form{
            border-left-width:0;
        }
    }
}