.contact-01{
    --primary:hsl(0, 3%, 7%);
    --primary-light:hsl(0, 3%, 15%);
    --primary-lighter:hsl(0, 3%, 43%);
    --secondary:rgb(165, 165, 48);

    display:flex;
    flex-direction:column;
    gap:30px;
    background-color:var(--primary);
    padding:30px;
    border-radius:10px;
    max-width:700px;

    .info{
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .info-item{
        display:flex;
        flex-direction:column;
        gap:15px;
        align-items:center;

        i{
            padding:20px;
            background-color:var(--secondary);
            border-radius:calc(20px + 1rem);
        }

        span:first-of-type{
            color:var(--secondary);
            font-size:1.3rem;
        }

        span:nth-of-type(2), a{
            color:var(--primary-lighter);
            text-decoration:none;
            line-height:1.6;
            text-align:center;
        }
    }


    /* form */
    .form-wrap{
        display:flex;
        flex-direction:column;
        gap:20px;

        >span:first-child{
            color:white;
            font-size:1.5rem;
            text-align:center;
            line-height:1.3;
        }
    }

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

        > button{
            background-color:var(--secondary);
            padding-block:15px;
            border-width:0;
            border-radius:5px;
            font-weight:bold;
            font-family:inherit;
            cursor:pointer;
        }
    }

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

        :first-child{
            padding:10px;
            font-family:inherit;
            background-color:var(--primary-light);
            border-width:0;
            color:var(--primary-lighter);
            border-radius:5px;
            font-size:inherit;

            &:focus{
                outline-width:0;
            }

            &::placeholder{
                color:var(--primary-lighter);
            }
        }

        textarea{
            height:100px;
        }

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

@media(max-width:600px){
    .contact-01{

        .info{
            grid-template-columns:auto;
            gap:15px;
        }
    }
}