.c-map {
	margin: 6rem 0;
}

.c-map__inner {
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

.c-map__flex-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem 8rem;

	@media (max-width: 1023px) {
		flex-direction: column;
	}
}

.c-map__title {
	@media (min-width: 1024px) {
		opacity: 0;

		.visible & {
			animation: slideUp 600ms ease both;
		}
	}
}

.c-map__map {
	flex-shrink: 0;

	@media (min-width: 1024px) {
		opacity: 0;

		.visible & {
			animation: fadeIn 600ms 450ms ease both;
		}
	}
}

.c-map__pin-item {
	@media (hover: hover) {
		&:hover {
			cursor: pointer;
		}
	}

	&.is-active {
		.c-map__pin-bg {
			fill: var(--map-pin-bg-active);
		}
	}
}

.c-map__pin-bg {
	transition: fill var(--transition-in-out);
}

.c-map__pin-marker path {
	fill: var(--map-pin);
}

.c-map__list {
	@media (min-width: 1024px) {
		opacity: 0;

		.visible & {
			animation: slideUp 600ms 650ms ease both;
		}
	}
}

.c-map__item {
	opacity: 0;
	max-height: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity var(--transition-in-out), height var(--transition-in-out);

	&.is-active {
		opacity: 1;
		max-height: fit-content;
		pointer-events: auto;
		visibility: visible;
	}
}

.c-map__detail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem;
}

.c-map__cta {
	@media (max-width: 1023px) {
		margin: 0 auto;
	}
}