.pincealinge-osm-map {
	--pom-width: 100%;
	--pom-height-mobile: 320px;
	--pom-height-tablet: 380px;
	--pom-height-desktop: 460px;
	--pom-marker-color: #4962cc;
	width: var(--pom-width);
	max-width: 100%;
}

.pincealinge-osm-map__canvas {
	width: 100%;
	height: var(--pom-height-mobile);
	border-radius: 8px;
	overflow: hidden;
	background: #eef0f3;
	z-index: 1;
}

.pincealinge-osm-map--soft .leaflet-tile {
	filter: saturate(0.65) contrast(0.95) brightness(1.06);
}

.pincealinge-osm-map--blue .leaflet-tile {
	filter: hue-rotate(175deg) saturate(0.85) contrast(0.95) brightness(1.05);
}

.pincealinge-osm-map--violet .leaflet-tile {
	filter: hue-rotate(245deg) saturate(0.8) contrast(0.95) brightness(1.04);
}

.pincealinge-osm-map--dark .leaflet-tile {
	filter: grayscale(0.85) invert(0.92) hue-rotate(180deg) brightness(0.88) contrast(0.9);
}

.pincealinge-osm-map__marker {
	align-items: center;
	background: var(--pom-marker-color);
	border: 3px solid #ffffff;
	border-radius: 999px 999px 999px 0;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
	display: flex;
	justify-content: center;
	transform: rotate(-45deg);
}

.pincealinge-osm-map__marker::after {
	background: #ffffff;
	border-radius: 50%;
	content: "";
	display: block;
	height: 38%;
	width: 38%;
}

.pincealinge-osm-map__directions {
	margin: 0.75rem 0 0;
}

.pincealinge-osm-map__directions a {
	color: var(--pom-marker-color);
	font-weight: 700;
	text-decoration: none;
}

.pincealinge-osm-map__directions a:hover,
.pincealinge-osm-map__directions a:focus-visible {
	text-decoration: underline;
}

@media (min-width: 576px) {
	.pincealinge-osm-map__canvas {
		height: var(--pom-height-tablet);
	}
}

@media (min-width: 992px) {
	.pincealinge-osm-map__canvas {
		height: var(--pom-height-desktop);
	}
}