form {
    display: grid;
    padding: 3em;
    background: #fff;
    border: 0px solid #c1c1c1;
    margin: 0rem auto 0 auto;
    max-width: 600px;
    
}

    form input {
        background: #fff;
        border: 1px solid #9c9c9c;
        border-radius: 4px;
    }

    form button {
        background: lightgrey;
        padding: 0.7em;
        width: 6pc;
        border: 0;
        margin-left: 9rem;
        border-radius: 4px;
    }

        form button:hover {
            background: gold;
        }

label {
    padding: 0.5em 0.5em 0.5em 0;
}

input {
    padding: 0.7em;
    margin-bottom: 0.5rem;
}

    input:focus {
        outline: 3px solid gold;
    }

@media (min-width: 400px) {
    form {
        grid-template-columns: 6rem 1fr;
        grid-gap: 16px;
    }

    label {
        text-align: right;
        grid-column: 1 / 2;
    }

    input,
    button {
        grid-column: 2 / 3;
    }
}