/* Lohocla Research Corporation
   Grid-based HTML forms CSS definitions
*/

.grid-wrapper {
    display: grid;
    grid-gap: 1rem;
    grid-column-gap: 4rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
}

.form-group {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: [label] 1fr [input] 2fr;
    grid-auto-flow: column;
    align-items: center;
}

.form-group.full-row {
    grid-column: 1 / span 2;
    grid-template-columns: [label] 0.73fr [input] 4fr;
}

label {
    grid-column: label;
    justify-content: right;
}

input, select, textarea {
    grid-column: input;
    justify-content: left;
}

input[type=button], input[type=submit] {
    min-width: 20vw;
}

@media screen and (max-width: 800px) {
    .grid-wrapper {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: [label] 1fr [input] 2fr;
    }

    .form-group {
        grid: none;
        display: contents;
    }

    form > * {
        font-size: 1rem;
    }

    input[type=button], input[type=submit] {
        display: block;
        width: 100%;
    }
}