.contact-block{
    /* margin: var(--top-margin) 0; */
    background: var(--color-primary);
    position: relative;
    z-index: 2;
    width: 100%;
}

.contact-section{
    width: 100%;
    margin: 0 0 10px;
}

h2.contact-section-title{
    width: 100%;
    margin: 0 0 5px;
    padding: 15px 30px;
}

ul.contact-people{
    list-style: none;
    margin: 0;
    padding: 0;
}

li.contact-person{
    width: 100%;
}

p.contact-person-region{
    width: 100%;
    margin: 0 0 5px;
    padding: 10px 30px;
    color: var(--color-text);
    font-size: 22px;
}

/* =========================
   Card grid
   Name on its own row
   Row 1: name (full width)
   Row 2+: company | phone | online (| address)
========================= */

article.contact-person-details{
    width: 100%;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-areas:
        "name   name   name"
        "meta   phone  online";
    gap: 5px 30px;
    align-items: start;
    padding: 15px 30px;
    margin: 0 0 5px;
}

/* 4-col variant when address exists */
article.contact-person-details.has-address{
    grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
    grid-template-areas:
        "name   name   name   name"
        "meta   phone  online address";
}

/* =========================
   Place the columns
========================= */

.contact-col{
    min-width: 0;
}

.contact-col-meta{
    grid-area: meta;
}

.contact-col-phone{
    grid-area: phone;
}

.contact-col-online{
    grid-area: online;
}

.contact-col-address{
    grid-area: address;
}

/* =========================
   Name row
========================= */

h3.contact-person-name{
    grid-area: name;
    margin: 0;
    font-size: 22px;
}

/* Company sits at the top of the meta column */
p.contact-person-company{
    margin: 0;
    color: var(--color-text);
}

/* =========================
   Details list formatting
========================= */

dl.contact-details{
    margin: 0;
    padding: 0;
}

div.contact-detail{
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 12px;
    margin: 10px 0 10px;
}

div.contact-detail dt{
    margin: 0;
    font-size: var(--secondary-font-size);
}

div.contact-detail dd{
    margin: 0;
    min-width: 0;
    font-size: var(--secondary-font-size);
}

div.contact-detail dd a{
    word-break: break-word;
}

/* Address column */
.contact-address-heading{
    margin: 5px 0 10px;
    font-weight: var(--global-font-weight);
    font-size: var(--default-font-size);
    letter-spacing: 0.02em;
    line-height: 30px;
    height: 22px;
}

.contact-address{
    margin: 0;
    display: inline-block;
    font-style: normal;
    word-break: break-word;
    font-size: var(--secondary-font-size);
    font-weight: var(--global-font-weight);
}

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

@media (max-width: 1300px){
    article.contact-person-details,
    article.contact-person-details.has-address{
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "meta    meta"
            "meta    meta"
            "phone   online"
            "phone   online"
            "address address";
        gap: 18px;
    }

    div.contact-detail{
        grid-template-columns: 60px 1fr;
    }
    .online-heading{
        height: 2px;
    }
}
@media (max-width: 980px){
    article.contact-person-details,
    article.contact-person-details.has-address{
        grid-template-columns: 1fr;
        grid-template-areas:
            "name"
            "meta"
            "phone"
            "online"
            "address";
        gap: 18px;
    }

    div.contact-detail{
        grid-template-columns: 60px 1fr;
    }
}