@media only screen and (max-width: 1024px) {
	
	:root {
		--gap8: calc(var(--gap) * 4);
		--gap16: calc(var(--gap) * 8);
		
		--fsize6: min(15vw, 96px);
	}
	
	section {
		padding: var(--gap2);
	}
	
	.figure p:nth-of-type(1) {
		line-height: var(--gap16);
	}
	
	.cursive-subtitle {
		line-height: var(--gap16);
	}
	
	#city-filter {
		padding: var(--gap2) var(--gap);
	}
	
}

@media only screen and (max-width: 767px) {
	
	.article {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: var(--gap2) 0;
	}
	
	.article img {
		width: 100%;
	}
	
	#hotels-container .hotel {
		width: 100%;
	}
	
}