@media only screen and (max-width: 1024px) {
	
	:root {
		--gap8: calc(var(--gap) * 4);
		--gap16: calc(var(--gap) * 8);
		
		--fsize3: min(6vw, 32px);
		--fsize4: min(8vw, 64px);
		--fsize6: min(13vw, 96px);
		
		--slider-width: calc(100vw - var(--gap4));
	}
	
	main {
		background-size: auto;
	}
	
	#header-img {
		opacity: 0.6;
	}

	#booking-widget {
		width: 100%;
		grid-gap: var(--gap2);
		border-radius: 0px;
		border: none;
		margin-top: 25vh;
		margin-bottom: 0;
	}

	.booking-widget-filters {
		flex-direction: column;
		grid-gap: var(--gap2);
	}

	.booking-widget-filters select, .booking-widget-filters input[type="date"], .booking-widget-filters input[type="text"] {
		background-color: var(--coul-white);
		color: var(--coul-brown);
		padding: var(--gap2) var(--gap);
		padding-right: var(--gap4);
	}

	.booking-widget-date {
		font-size: var(--fsize2);
	}
	
	#offers-cta {
		position: fixed;
		top: 0;
		right: 0;
		left: unset;
		height: var(--responsive-hamburger-height);
		min-height: auto;
		width: 50%;
		max-width: 50vw;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: none;
		writing-mode: initial;
		z-index: 90;
	}
	
	.tiles-container .tile:nth-child(odd), .tiles-container .tile:nth-child(even) {
		margin: 0;
	}
	
	.banner {
		height: auto;
		padding: var(--gap2);
		flex-direction: column-reverse;
	}
	
	.banner .banner-image {
		position: relative;
		height: 400px;
		background-attachment: inherit;
	}
	
	.banner .banner-text {
		padding: var(--gap2);
		width: 100%;
		max-width: unset;
	}
	
	.room {
		flex-direction: column-reverse !important;
		height: auto;
		align-items: flex-start;
	}

	.room .slider {
		margin: auto;
	}
	
	.room-photos {
		flex: none;
		height: 400px;
	}
	
	.room-details {
		width: auto;
	}
	
	#hotels-container .hotel {
		width: 100%;
	}
	
	#services-container {
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
	
	.text-img img{
		max-height: 80vh;
		aspect-ratio: unset;
	}

	.accordion-title {
		padding: var(--gap2);
	}

	.accordion-content-padding {
		padding: var(--gap2);
	}
	
	.contact-details {
		text-align: center;
		align-items: center;
	}
	
	.contact-details ul {
		list-style: none;
	}
	
	footer {
		padding-bottom: var(--gap16);
	}
	
}