/* ========================================
SIGHTSEEING
======================================== */

.sightseeing-page{
	overflow:hidden;
	color:#222;
}

.sightseeing-page img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.sightseeing-page .sub-intro,
.sightseeing-intro{
	padding-bottom:30px;
}


/* ========================================
COMMON
======================================== */

.sightseeing-heading{
	margin:12px 0 0;
	color:#222;
	font-size:34px;
	font-weight:400;
	line-height:1.6;
}

.sightseeing-subheading{
	margin:10px 0 0;
	color:#222;
	font-size:24px;
	font-weight:400;
	line-height:1.7;
}

.sightseeing-lead{
	margin:28px 0 0;
	color:#222;
	font-size:22px;
	line-height:2;
}

.sightseeing-text{
	margin:25px 0 0;
	color:#222;
	font-size:15px;
	line-height:2.3;
}

.sightseeing-section-head{
	max-width:720px;
	margin:0 auto 40px;
	text-align:center;
}


/* ========================================
CANAL CRUISE
======================================== */

.sightseeing-cruise{
	padding:50px 0;
}

.sightseeing-cruise-inner{
	max-width:1400px;
	margin:0 auto;
}

.sightseeing-cruise-main{
	display:grid;
	grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
	align-items:start;
}

.sightseeing-cruise-image{
	aspect-ratio:3 / 2;
	height:auto;
	overflow:hidden;
}

.sightseeing-cruise-content{
	max-width:520px;
	padding:0 40px 40px 80px;
}


/* NIGHT CRUISE */

.sightseeing-cruise-sub{
	display:grid;
	grid-template-columns:minmax(360px,.75fr) minmax(0,1.25fr);
	align-items:start;
	margin-top:70px;
}

.sightseeing-cruise-sub-image{
	grid-column:2;
	aspect-ratio:3 / 2;
	height:auto;
	overflow:hidden;
}

.sightseeing-cruise-sub-content{
	grid-column:1;
	grid-row:1;
	max-width:520px;
	padding:0 80px 40px 40px;
	justify-self:end;
}


/* ========================================
PLACES TO VISIT
======================================== */

.sightseeing-spots{
	padding:50px 40px;
}

.sightseeing-spots-inner{
	max-width:1280px;
	margin:0 auto;
}

.sightseeing-spots-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:30px;
}

.sightseeing-spot-item{
	min-width:0;
}

.sightseeing-spot-image{
	height:330px;
	overflow:hidden;
}

.sightseeing-spot-content{
	padding:25px 5px 0;
}


/* ========================================
SEASONAL EVENTS
======================================== */

.sightseeing-seasons{
	padding:50px 40px;
}

.sightseeing-seasons-inner{
	max-width:1280px;
	margin:0 auto;
}

.sightseeing-seasons-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:30px;
}

.sightseeing-season-item{
	min-width:0;
}

.sightseeing-season-image{
	height:330px;
	overflow:hidden;
}

.sightseeing-season-content{
	padding:25px 5px 0;
}


/* EVENT LIST */

.sightseeing-event-list{
	display:flex;
	flex-wrap:wrap;
	gap:8px 14px;
	margin:18px 0 0;
	padding:0;
	list-style:none;
}

.sightseeing-event-list li{
	position:relative;
	padding-left:13px;
	color:#555;
	font-size:13px;
	line-height:1.8;
}

.sightseeing-event-list li::before{
	content:"";
	position:absolute;
	top:.85em;
	left:0;
	width:4px;
	height:4px;
	border-radius:50%;
	background:#888;
}

.sightseeing-seasons-note{
	margin:40px 0 0;
	color:#777;
	font-size:12px;
	line-height:2;
	text-align:center;
}


/* ========================================
IMAGE HOVER
======================================== */

@media(hover:hover) and (pointer:fine){

	.sightseeing-cruise-image img,
	.sightseeing-cruise-sub-image img,
	.sightseeing-spot-image img,
	.sightseeing-season-image img{
		transition:transform 1.2s cubic-bezier(.22,1,.36,1);
	}

	.sightseeing-cruise-image:hover img,
	.sightseeing-cruise-sub-image:hover img,
	.sightseeing-spot-item:hover img,
	.sightseeing-season-item:hover img{
		transform:scale(1.025);
	}

}


/* ========================================
TABLET
======================================== */

@media(max-width:1100px){

	.sightseeing-cruise,
	.sightseeing-spots,
	.sightseeing-seasons{
		padding-top:50px;
		padding-bottom:50px;
	}

	.sightseeing-cruise-main{
		grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
	}

	.sightseeing-cruise-content{
		padding:0 35px 35px 50px;
	}

	.sightseeing-cruise-sub{
		grid-template-columns:minmax(320px,.85fr) minmax(0,1.15fr);
		margin-top:60px;
	}

	.sightseeing-cruise-sub-content{
		padding:0 50px 35px 35px;
	}

	.sightseeing-spot-image,
	.sightseeing-season-image{
		height:280px;
	}

}


/* ========================================
MOBILE
======================================== */

@media(max-width:768px){

	.sightseeing-page .sub-intro,
	.sightseeing-intro{
		padding-bottom:40px;
	}

	.sightseeing-cruise,
	.sightseeing-spots,
	.sightseeing-seasons{
		padding-top:40px;
		padding-bottom:40px;
	}

	.sightseeing-heading{
		font-size:28px;
		line-height:1.6;
	}

	.sightseeing-subheading{
		font-size:22px;
		line-height:1.6;
	}

	.sightseeing-lead{
		margin-top:20px;
		font-size:19px;
		line-height:1.9;
	}

	.sightseeing-text{
		margin-top:20px;
		font-size:14px;
		line-height:2.2;
	}

	.sightseeing-section-head{
		margin:0 0 30px;
		text-align:left;
	}


	/* CANAL CRUISE */

	.sightseeing-cruise-main{
		display:block;
	}

	.sightseeing-cruise-image{
		width:calc(100% - 30px);
		height:68vw;
		aspect-ratio:auto;
		margin-right:auto;
		margin-left:auto;
	}

	.sightseeing-cruise-content{
		max-width:none;
		padding:35px 30px 0;
	}


	/* NIGHT CRUISE */

	.sightseeing-cruise-sub{
		display:flex;
		flex-direction:column;
		margin-top:50px;
	}

	.sightseeing-cruise-sub-image{
		order:1;
		width:calc(100% - 30px);
		height:62vw;
		aspect-ratio:auto;
		margin-right:auto;
		margin-left:auto;
	}

	.sightseeing-cruise-sub-content{
		order:2;
		max-width:none;
		padding:35px 30px 0;
	}


	/* SPOTS */

	.sightseeing-spots{
		padding-left:30px;
		padding-right:30px;
	}

	.sightseeing-spots-grid{
		grid-template-columns:1fr;
		gap:45px;
	}

	.sightseeing-spot-image{
		height:60vw;
	}

	.sightseeing-spot-content{
		padding:22px 0 0;
	}


	/* SEASONS */

	.sightseeing-seasons{
		padding-left:30px;
		padding-right:30px;
	}

	.sightseeing-seasons-grid{
		grid-template-columns:1fr;
		gap:45px;
	}

	.sightseeing-season-image{
		height:60vw;
	}

	.sightseeing-season-content{
		padding:22px 0 0;
	}

	.sightseeing-event-list{
		margin-top:15px;
	}

	.sightseeing-seasons-note{
		margin-top:30px;
		text-align:left;
	}

}


/* ========================================
SMALL MOBILE
======================================== */

@media(max-width:480px){

	.sightseeing-heading{
		font-size:25px;
	}

	.sightseeing-subheading{
		font-size:20px;
	}

	.sightseeing-lead{
		font-size:18px;
	}

	.sightseeing-cruise-content,
	.sightseeing-cruise-sub-content{
		padding-left:20px;
		padding-right:20px;
	}

	.sightseeing-spots,
	.sightseeing-seasons{
		padding-left:20px;
		padding-right:20px;
	}

	.sightseeing-cruise-image{
		width:calc(100% - 20px);
		margin-right:auto;
		margin-left:auto;
	}

	.sightseeing-cruise-sub-image{
		width:calc(100% - 20px);
		margin-right:auto;
		margin-left:auto;
	}

}