#map {
	padding: var(--spacing-lg) 0 var(--spacing-xl);
	position: relative;
}

#map-row {
	background-image: url(../images/paper.jpg);
}

#map-card {
	color: var(--primary-black);
	font-size: 18px;
	line-height: 22px;
	position: relative;
	background-image: url(../images/map-card__top.png), url(../images/pain-content.png);
	background-position: top 16px center, bottom 16px center;
	background-repeat: no-repeat;
	padding: var(--spacing-md) 0 48px 0;
	margin: auto 0;
}

#map-card::after {
	display: block;
	content: "";
	position: absolute;
	width: 30px;
	height: 32px;
	top: -16px;
	left: 50%;
	margin-left: -15px;
	background-image: url(../images/pain-image.png);
}

#map-card ul {
	padding-left: 24px;
}

.map-card__container {
	display: none;
}

#map-scrollable {
	margin: 64px 0;
	border: 32px solid;
	border-image: url(../images/map-border.png) 21 fill;
	position: relative;
}

#map-scrollable::after,
#map-scrollable::before {
	width: 82px;
	display: block;
	content: "";
	position: absolute;	
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 2;
}

#map-scrollable::after {
	top: -32px;
	left: -32px;
	bottom: -32px;
	background-image: url(../images/map-corner__left-top.png), url(../images/map-center__right.png), url(../images/map-corner__left-bottom.png);
	background-position: top left, left center, bottom left;
}

#map-scrollable::before {
	top: -32px;
	right: -32px;
	bottom: -32px;
	background-image: url(../images/map-corner__right-top.png), url(../images/map-center__left.png), url(../images/map-corner__right-bottom.png);
	background-position: top right, right center, bottom right;
}

#map-scrollable__scroll {
	height: 643px;
	width: 1080px;
	overflow: hidden;
}

#map-scrollable__content {
	background-image: url(../images/map.jpg);
	background-position: 0 center;
	background-size: auto 644px;
	transition: position .2s linear;
	width: 2594px;
	height: 100%;
	position: relative;
}

.map-item {
	width: 142px;
	height: 140px;
	background: url(../images/item.png);
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	color: var(--promo-color-secondary);
}

.map-item.active {
	background: url(../images/item-active.png);
	animation: pulse 2s linear infinite;
}

@keyframes pulse { 
	50% { 
		transform: scale(1.1); 
	} 
	100% { 
		transform: scale(1); 
	} 
}

@media (max-width: 1900px) {
	#map-card {
		display: flex;
		align-items: center;
	}

	#map-scrollable {
		margin: 48px 0;
		width: 100%;
	}

	#map-scrollable__scroll {
		width: 100%;
	}
}

@media (max-width: 1280px) {
	#map-row .row {
		padding-left: 0;
		padding-right: 0;
	}

	#map-card {
		display: block;
		height: auto;
		width: 100%;
		padding: 48px 0;
	}

	#map-card__slider .slick-arrow {
		width: 32px;
		color: var(--grey-30);
		top: -48px;
		bottom: -48px;
		padding: 0;
		border-radius: 0;
	}

	#map-card__slider .slick-prev {
		left: -16px;
	}

	#map-card__slider .slick-next {
		right: -16px;
	}

	.map-card__container {
		padding-left: 16px;
		padding-right: 16px;
	}

	#map-scrollable {
		display: none;
	}
}