.map #map {
    grid-area: 1/3/1/span 10;
    width: 100%;
    aspect-ratio: 1920/960;
    background: gray;
	z-index: 1;
}

.map #map .leaflet-marker-icon.marker-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	border-radius: 100vmin;
	color: var(--black);
}

.map .map-overlay {
	grid-area: 1/3/1/span 10;
	position: relative;
	z-index: 2;
	gap: var(--m-xs);
	width: fit-content;
	height: fit-content;
	margin-top: var(--m-md);
	margin-left: max(48px, 5.46875vw);
}

.map .map-overlay .headline {
	max-width: 16ch;
}

.map .map-overlay .filter-container {
    gap: 10px;
}

.map .map-overlay .filter-container .icon.filter {
    display: block;
    width: max(32px, 1.5625vw);
    aspect-ratio: 1/1;
    flex: 0 0 auto;
    mask: url(../../img/icon-filter.svg) no-repeat center/contain;
    mask: url(../../img/icon-filter.svg) no-repeat center/contain;
    background: currentColor;
}

.map .map-overlay .filter-container label {
    display: flex;
    align-items: center;
    gap: var(--m-xs);
}

.map .map-overlay .filter-container label:not(:last-child) {
    margin-right: var(--m-md);
}

.map .leaflet-popup-content {
	margin: 20px 20px 12px;
}

.map .leaflet-popup-content .popup-title, .leaflet-popup-content .popup-title a {
	color: var(--black);
	margin-top: 1em;
}

.map .leaflet-control-attribution {
	display: none;
}

@media (max-width: 1199.98px) {
	.map #map {
		grid-area: 1/2/1/span 12;
	}

	.map .map-overlay {
		grid-area: 1/2/1/span 12;
	}
}

@media (max-width: 991.98px) {
	.map .map-overlay {
		grid-area: 1/2/1/span 12;
		margin: 0;
		margin-bottom: var(--m-sm);
	}
	
	.map #map {
		grid-area: 2/2/2/span 12;
		aspect-ratio: 3/4;
	}

	.map .leaflet-popup-content {
		max-width: 55vw;
	}

}