.contact {
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 1rem;
    margin-top: 1rem;
}
.top-inputs {
    display: flex;
    gap: 1rem;
    width: 100%;
}
.top-inputs input { width: 50%; }
.contact input, .contact textarea {
    width: 100%;
    border: 1px solid var(--text-color-second);
    border-radius: 12px;
    padding: 0.8rem;
    background: none;
    outline: none;
    color: var(--text-color-second);
    box-shadow: var(--shadow-medium);
}
.contact textarea { min-height: 180px; }
.card-element {
    cursor: pointer;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 1rem;
    color: var(--text-color-second);
}

@media (max-width: 500px) {
    .top-inputs input { width: 100%; }
    .top-inputs { flex-direction: column; }
    .left-modal, .right-modal { width: 100%; }
}