.contact-hero {
    background: linear-gradient(rgba(23, 26, 31, 0.52), rgba(23, 26, 31, 0.74)),
        url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=80") center/cover;
}

.contact-grid {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: 0.82fr 1.18fr;
}

.contact-info,
.contact-form {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 28px;
}

.contact-info h2 {
    font-size: 1.6rem;
    margin-bottom: 22px;
}

.contact-info ul {
    display: grid;
    gap: 16px;
    list-style: none;
}

.contact-info li {
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink);
    display: grid;
    gap: 4px;
    padding-bottom: 16px;
}

.contact-info span {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.contact-form {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
}

.contact-form label {
    display: grid;
    gap: 7px;
}

.contact-form .full {
    grid-column: 1 / -1;
}

.contact-form input,
.contact-form textarea {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: 12px;
}

.contact-form small {
    color: #8a3824;
}

.contact-form button {
    justify-self: start;
}

.map-wrap {
    margin-top: 34px;
}

.map-wrap iframe {
    border: 0;
    border-radius: var(--radius);
    height: 360px;
    width: 100%;
}

@media (max-width: 820px) {
    .contact-grid,
    .contact-form {
        grid-template-columns: 1fr;
    }
}