section.route-planner {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: 1rem;
	grid-template-areas: "markers map";
}

section.route-planner > section.markers {
	grid-area: markers;
}

section.route-planner > section.map {
	grid-area: map;
}

section.route-planner .map-container {
	width: 500px;
	height: 500px;
}

@media (max-width: 639px) {
	section.route-planner {
		grid-template-columns: 1fr;
		row-gap: 1rem;
		grid-template-areas:
			"markers"
			"map";
	}

	section.route-planner .map-container {
		width: 90vw;
		height: 70vh;
	}
}