/* Areas Section */
.areas-container {
	background-color: white;
}

.areas-inner-container {
	background-image: url('/wp-content/themes/kyototravel/assets/images/top/areas/kyoto_map_bg.webp');
	background-position: 84% 43%;
	background-size: 310%;
	background-repeat: no-repeat;
}

.map-top-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 41%; /* Adjust if needed */
		background: linear-gradient(to bottom, white 1%, rgba(255, 255, 255, 0) 60%);
		pointer-events: none; /* Ensures it doesn’t block interactions */
		z-index: 5;
}

.map-bottom-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 41%; /* Adjust based on your design */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
    z-index: 5;
}

/* Screen Sizes >= 768px */
@media (min-width: 768px) {
	.areas-container {
		background-image: url('/wp-content/themes/kyototravel/assets/images/top/areas/kyoto_map_bg.webp');
		background-position: 71% 50%;
		background-size: 200%;
		background-repeat: no-repeat;
	}

	.areas-inner-container {
		background-image: none;
	}
}

@media (min-width: 1280px) {
	.areas-container {
		background-position: 61% 64%;
		background-size: 110%;
	}
}

@media (min-width: 1600px) {
	.areas-container {
		background-position: 50% 65%;
		background-size: 100%;
	}
}