.contact .bento {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 10px;
}

.contact input,
.contact textarea {
    all: unset;
    padding: 10px;
    border-radius: 20px;
    background-color: rgba(var(--background-800-rgb), .2);
    color: var(--text-800);
    font-size: 16px;
    transition: all .2s ease;
    backdrop-filter: blur(3px);
}

.contact input:focus,
.contact textarea:focus,
.contact input:focus-visible,
.contact textarea:focus-visible,
.contact input:active,
.contact textarea:active {
    border: 1px solid var(--background-300);
}

.contact input#name {
    grid-row: 1;
    grid-column: 1 / 7;
}

.contact input#email {
    grid-row: 1;
    grid-column: 7 / 13;
}

.contact input#title {
    grid-row: 2;
    grid-column: 1 / 13;
}

.contact textarea#message {
    grid-row: 3 / 7;
    grid-column: 1 / 13;
}

.contact button {
    grid-row: 7;
    grid-column: 1 / 13;
    padding: 10px;
    border-radius: 20px;
    border: none;
    background-color: rgba(var(--background-800-rgb), .2);
    color: var(--text-800);
    font-size: 16px;
    cursor: pointer;
    transition: all .2s ease;
    backdrop-filter: blur(3px);
}

.contact button:hover {
    background-color: var(--background-800);
    color: var(--text-200);
}