section.our-locations {
	--blue-1: #0C487B;
	--blue-2: #24608C;
	
	background-color: var(--blue-1);
	color: white;
	overflow: hidden;

	h3 {
		text-align: left;
	}
	.svg-container {
		position: relative;
		
		.popup {
			--tail-height: 2.5rem;
			--tail-width: 1.5rem;
			position: absolute;
			top: 0;
			left: 0;
			transform: translate(0%, calc(-100% - var(--tail-height)));
			color: black;
			background: white;
			padding: 1em;
			display: none;
			&.active {
				display: flex;
			}
			&:after {
				content: '';
				height: var(--tail-height);
				width: var(--tail-width);
				background: inherit;
				position: absolute;
				top: calc(100% - 1px);
				left: 0px;
				clip-path: polygon(0 0, 100% 0, 0 100%);
			}
		}
		
		svg {
			width: 100%;
			max-width: 100%;
			display: block;
			overflow: visible;
			/* outline: 1px dashed red; */
			*:not([id^="spot-"]) {
				pointer-events: none;
			}
		}
	}
	
	
	.locations {
		columns: 6;
		column-width: 15rem;
		
		font-size: 1.25rem;
		line-height: 1.4;
		
		margin-top: 3rem;
		
		
		.location-group {
		  break-inside: avoid;
		  margin-bottom: 2rem;
		}
		
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		a {
			color: inherit;
			text-decoration-color: transparent;
			text-underline-offset: .15em;
			text-underline-thickness: .1em;
			transition: all .3s ease;
			&:hover {
				text-decoration-color: inherit;
			}
		}
		
	}

	.locations-mobile {
		display: none;
		margin-top: 2rem;

		.accordion {
			--accent-color: #fff4;
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			margin-bottom: 1rem;
		}
		
		a {
			color: inherit;
			text-decoration-color: transparent;
			text-underline-offset: .15em;
			text-underline-thickness: .1em;
			transition: all .3s ease;
			&:hover {
				text-decoration-color: inherit;
			}
		}
	}

	@media (width < 768px) {
		.locations { display: none; }
		.locations-mobile {
			display: block;
		}
	}
}