/* BEGIN OFFICE-LISTING CSS -------------------------------------> */


.officeList
{
	max-width: var(--narrow-width);
	margin: 0 auto;
	margin-bottom: 56px;
}

.officeList ul,
.officeList li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.officeList ul
{
	display: grid;
	grid-gap: max(25px, 
             min(50px, 25px + (50 - 25) * ((100vw - 768px) / (1350 - 768))
	));
}

.officeList li
{
	display: flex;
	align-items: center;
	background: #f3f3f3;
	padding: 26px;
	box-sizing: border-box;
}


.officeList .image 
{
	width: 40%;
	max-width: 179px;
	aspect-ratio: 1/1;
	overflow: hidden;
	margin-right: max(25px, 
             min(45px, 25px + (45 - 25) * ((100vw - 600px) / (1350 - 600))
	));
}

.officeList .image img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.officeList .title 
{
	--max-font-size: 28;
}

.officeList .title a:not(:hover):not(:focus)
{
	color: inherit;
	font-weight: 400;
}

.officeList .phone 
{
	--max-font-size: 18;
}

.officeList .mapiturl
{
	width: 36px;
}

.officeList .mapiturl 
{
	margin-top: max(20px, 
             min(32px, 20px + (32 - 20) * ((100vw - 600px) / (1350 - 600))
	));
}

.officeList .mapiturl svg 
{
	display: block;
	width: 100%;
	height: auto;
}

.officeList .mapiturl .svgBorder,
.officeList .mapiturl .svgInnards
{
	fill: var(--Deep-Teal);
}

.officeList .mapiturl .svgBackground 
{
	fill: none;
}

.officeList .mapiturl a:is(:hover, :focus) .svgBackground
{
	fill: var(--Pale-Teal);
}

@media (min-width: 768px)
{

	.officeList ul.results_list 
	{
		grid-template-columns: repeat(2, 1fr);
	}

}

/* END OFFICE-LISTING CSS ---------------------------------------> */