/**** CONTACTS INTRO ****//**** CONTACTS INTRO ****//**** CONTACTS INTRO ****/

#contacts-intro {background-color: var(--color-bg-primary);}
#contacts-intro .lead {max-width: 62ch;}

/**** CONTACT SECTIONS ****//**** CONTACT SECTIONS ****//**** CONTACT SECTIONS ****/

#address {background-color: var(--color-bg-light);}
#phone-mail {background-color: var(--color-bg-primary);}
#work-hours {background-color: var(--color-bg-secondary);}
#social {background-color: var(--color-bg-primary);}
#official {background-color: var(--color-bg-light);}
#address .container, #phone-mail .container, #work-hours .container, #social .container, #official .container {width: calc(100% - var(--container-padding) - var(--container-padding)); padding-top: var(--space-lg); padding-bottom: var(--space-lg); background-color: var(--color-bg-white); border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);}
#phone-mail p, #social p {margin-bottom: var(--space-sm);}
#phone-mail p a, #social p a {font-family: var(--font-family-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-navy-dark);}
#official p {padding: 0px 0px var(--space-sm) 0px; border-bottom: var(--border-width) solid var(--color-border-light);}
#official p:last-child {padding-bottom: 0px; border-bottom: 0px;}

/**** MEDIA 500 ****//**** MEDIA 500 ****//**** MEDIA 500 ****/

@media (max-width: 500px) {
    #address .container, #phone-mail .container, #work-hours .container, #social .container, #official .container {padding: var(--space-md) var(--container-padding) var(--space-md) var(--container-padding); border-radius: var(--radius-md);}
    #address h2, #phone-mail h2, #work-hours h2, #social h2, #official h2 {font-size: var(--font-size-lg);}
    #phone-mail p a, #social p a {font-size: var(--font-size-md);}
}