/* ==========================================================
   CONTACT
   ========================================================== */

.contact {

    background: var(--color-background-alt);

}

.contact__layout {

    align-items: start;

}

/* ==========================================
   Info Card
   ========================================== */

.contact__info h3 {

    color: var(--color-heading);
    font-size: var(--fs-xl);

}

.contact__details {

    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    list-style: none;

}

.contact__details li {

    display: flex;
    flex-direction: column;
    gap: .25rem;

    padding-top: 1.25rem;

    border-top: 1px solid var(--color-border);

}

.contact__details li:first-child {

    padding-top: 0;
    border-top: none;

}

.contact__details strong {

    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;

}

.contact__details a,
.contact__details span {

    color: var(--color-text);
    font-size: var(--fs-md);

}

.contact__details a {

    color: var(--color-brand-400);

}

.contact__details a:hover {

    color: var(--color-brand-300);

}

/* ==========================================
   Feedback
   ========================================== */

#contact-form-feedback:empty {

    display: none;

}

/* ==========================================
   Responsive
   ========================================== */

@media (max-width: 900px) {

    .contact__layout {

        grid-template-columns: 1fr;

    }

}