/* FORM */
form {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    overflow: hidden;
}

form > * {
    grid-column: span 2;
}

.input-container {
    /* height: 3em; */
    border: 2px solid var(--c-primary-color);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    line-height: 1;
}

form label {
    padding: 0.5rem 1rem;
    display: block;
}

.input-container input,
.input-container textarea {
    height: 100%;
    border: none;
    resize: none;
    flex-grow: 1;
    flex-shrink: 1;
    background: none;
    color: var(--c-primary-color);
    box-sizing: border-box;
    width: 100px;
}

.input-container:has(input:focus),
.input-container:has(textarea:focus) {
    border: 2px solid var(--c-accent-color);
}

.input-container:has(textarea) {
    height: 6em;
    align-items: start;
}

.input-container textarea {
    padding: 1rem 0;
}

.input-container > i {
    margin: 1rem;
    line-height: 1;
    font-size: calc(var(--ft-standard-text)*1.2);
    box-sizing: border-box;
}

form p,
form .submit {
    grid-column: span 1;
}

form .submit {
    justify-self: end;
}

form .submit button {
    line-height: 1;
    border: 2px solid var(--c-primary-color);
    box-sizing: border-box;
    background: none;
    color: var(--c-primary-color);
    display: flex;
    padding: 0;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

form .submit button:hover,
form .submit button:focus {
    background-color: var(--c-accent-color);
    color: var(--c-secondary-color);
    border: 2px solid var(--c-accent-color);
}

form .submit button i {
    padding: 1rem;
}

form .submit button p {
    padding: 0 1rem 0 0;
}


@media screen and (max-width: 768px) {
    form {
        /* grid-template-columns: 1fr; */
        gap: 1rem;
        /* width: 100%; */
    }

    form .submit,
    form .submit button {
        grid-row: 4;
        width: 100%;
    }
    
    form p,
    form .submit {
        grid-column: span 2;
    }
}