/* LANDER CSS */
/* THH HOMEPAGE © - FORWARD/STELLAR */



@media (max-width: 767px) {

	/* header */
	.header--hero--body-wrapper {
		padding: calc(1 * var(--padding-element-y)) calc(1 * var(--padding-element-x));
	}

	.header--hero--body {
		padding: calc(1 * var(--padding-element-y));
	}

	.header--hero--body h2 {
		color: var(--text-color);
		font-size: calc(1.5 * var(--font-size-h2));
	}

	.header--hero--body p {
		font-size: calc(1.25 * var(--font-size));
	}

	.header--hero--image {
		height: 350px;
	}


	/* header next pagge */
	.section--hero--portal {
		padding-bottom: 1rem;
	}

	.hero--portal--single.next--page {
		height: 200px;
	}

	.hero--portal--single img {
		height: 250px;
	}


	/* intro */
	.logo--box img {
		height: auto;
		max-width: 100%;
	}

	.section--intro {
		padding: calc(2 * var(--padding-element-y)) calc(0 * var(--padding-element-x)) calc(1 * var(--padding-element-y));
	}

	.section--intro h1.intro--h1 {
		font-size: 1.65rem;
		line-height: 1.2;
		margin-bottom: .5em;
	}

	.section--intro h2.intro--h2 {
		font-size: 1.4rem;
		line-height: 1.2;
	}

	.section--intro p.intro--text {
		font-size: 1.125rem;
		line-height: 1.4;
	}

	.section--intro.accommodation--page {
		padding-top: 3rem;
	}


	/* accommodation */

	.accommodations--title {
		font-size: 1.75rem;
	}

	.accommodation--image img {
		height: 300px;
	}

	.section--accommodationtypes {
		padding: 2rem 0;
	}

	.section--accommodationtypes .acctype--title {
		font-size: 1.5rem;
		margin: .75rem 0 1rem;
	}

	.section--accommodationtypes .acctype--price {
		font-size: 1.125rem;
	}


	/* info title */
	.info--title span {
		font-size: 1.75rem;
		line-height: 1.2;
		margin-bottom: 1.25rem;
	}


	/* intro next */
	.next--page .section--intro {
		padding: calc(2 * var(--padding-element-y)) calc(0 * var(--padding-element-x)) calc(1 * var(--padding-element-y));
	}

	.next--page .section--intro h1 {
		font-size: calc(1 * var(--font-size-h1));
	}

	.next--page .section--intro p {
		font-size: calc(1.25 * var(--font-size));
	}


	/* paragraph */
	.section--paragraph {
		padding: calc(2 * var(--padding-element-y)) calc(0 * var(--padding-element-x));
	}

	.section--paragraph .img--box {
		height: 350px;
		object-fit: cover;
		width: 100%;
	}

	.section--paragraph h2 {
		font-size: calc(1.1 * var(--font-size-h2));
	}

	.section--paragraph p {
		font-size: calc(1.15 * var(--font-size));
	}


	/* paragraph articles */
	.section--paragraph--article {
		padding: 3rem 0;
	}

	.section--paragraph--article .img--box {
		height: 300px;
	}

	.section--paragraph--article h2 {
		font-size: 1.65rem;
	}

	.section--paragraph--article p {
		font-size: 1.15rem;
		line-height: 1.5;
	}


	/* articles (news and stories) */
	.section--articles {
		padding: 3rem 0;
	}

	.section--articles .img--box {
		height: 300px;
	}

	.section--articles h2 {
		font-size: 1.65rem;
	}

	.section--articles p {
		font-size: 1.15rem;
		line-height: 1.5;
	}


	/* about */
	.section--about {
		padding: calc(2 * var(--padding-element-y)) calc(0 * var(--padding-element-x));
	}

	.section--about .img--box {
		height: 350px;
		object-fit: cover;
		width: 100%;
	}

	.section--about h2 {
		font-size: calc(1.1 * var(--font-size-h2));
	}

	.section--about p {
		font-size: calc(1.15 * var(--font-size));
	}


	/* product page */
	.section--product .product--img--box {
		height: 350px;
	}

	.section--product .product--title h1 {
		font-size: calc(1.15 * var(--font-size-h1));
	}

	.section--product .product--price h2 {
		font-size: calc(2 * var(--font-size));
	}

	.section--product .product--details h3 {
		font-size: calc(1.25 * var(--font-size));
		margin-bottom: calc(.75 * var(--margin-element-y));
	}

	.section--product .product--details p {
		font-size: calc(1 * var(--font-size));
	}



	/* reviews */
	.section--reviews {
		padding: 3rem 0;
	}

	.section--reviews--title {
		font-size: 1.75rem;
	}


	/* call to action */
	.section--cta {
		padding: calc(3 * var(--padding-element-y)) calc(0 * var(--padding-element-x));
	}

	.section--cta h2 {
		font-size: calc(1.25 * var(--font-size-h3));
	}

	.section--cta p {
		font-size: calc(1.15 * var(--font-size));
	}


	/* contact */
	.contact--info-intro h2 {
		font-size: calc(1.25 * var(--font-size-h3));
	}


	/* gallery */
	.section--gallery {
		padding-bottom: 3rem;
		padding-top: 1rem;
	}


	/* faq */
	.section--faq {
		padding: 2rem 0;
	}

	.section--faq--title {
		font-size: 1.75rem;
	}

	.faq--question h3 {
		font-size: 1.15rem;
	}

	.faq--item:last-child {
		border-bottom: 1.5px solid #EEEEEE;
		cursor: pointer;
		padding: 1.5rem 0;
	}



	/* stories */
	.section--stories .stories--title {
		font-size: 1.75rem;
	}


	/* form home */
	.section--form .paragraph--h2 {
		font-size: 1.75rem;
	}


	/* form */
	.form--wrapper {
		padding: calc(1.25 * var(--padding-element-y)) calc(1.5 * var(--padding-element-x));
	}

	.form--block label {
		font-size: calc(1.15 * var(--font-size));
		margin-bottom: calc(.25 * var(--margin-element-y));
	}

	.form--content {
		padding: 1rem;
	}


	/* footer */
	.footer--links--list {
		flex-direction: column;
		gap: 1rem;
	}

}



/* ================================================================== */
@media screen and (min-width: 768px) and (max-width: 991px) {
	/* ================================================================== */

	/* header next pagge */
	.section--hero--portal {
		padding-bottom: 1rem;
	}

	.hero--portal--single.next--page {
		height: 250px;
	}

	.hero--portal--single img {
		height: 250px;
	}

	.hero--portal--accommodations .hero--headline--h2 {
		font-size: clamp(2rem, 3.75vw, 4.5rem);
	}

	.hero--portal--accommodations .hero--headline--sub {
		font-size: clamp(1.25rem, 1.85vw, 2.75rem);
	}


	/* intro */
	.section--intro h1.intro--h1 {
		font-size: 2rem;
	}

	.section--intro h2.intro--h2 {
		font-size: 1.5rem;
	}


	/* accommodations */
	.section--accommodationtypes {
		padding: 2rem 0;
	}


}



/* ================================================================== */
@media screen and (min-width: 992px) and (max-width: 1199px) {
	/* ================================================================== */

	/* header next pagge */
	.section--hero--portal {
		padding-bottom: 1rem;
	}

	.hero--portal--single.next--page {
		height: 275x;
	}

	.hero--portal--single img {
		height: 275px;
	}

	.hero--portal--accommodations .hero--headline--h2 {
		font-size: clamp(2rem, 3.75vw, 4.5rem);
	}

	.hero--portal--accommodations .hero--headline--sub {
		font-size: clamp(1.25rem, 1.85vw, 2.75rem);
	}


	/* intro */
	.section--intro h1.intro--h1 {
		font-size: 2.125rem;
	}

	.section--intro h2.intro--h2 {
		font-size: 1.55rem;
	}


}



/* ================================================================== */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
	/* ================================================================== */

	/* header next pagge */
	.section--hero--portal {
		padding-bottom: 1rem;
	}

	.hero--portal--single.next--page {
		height: 350x;
	}

	.hero--portal--single img {
		height: 350px;
	}

	.hero--portal--accommodations .hero--headline--h2 {
		font-size: clamp(2rem, 3.75vw, 4.5rem);
	}

	.hero--portal--accommodations .hero--headline--sub {
		font-size: clamp(1.25rem, 1.85vw, 2.75rem);
	}


	/* intro */
	.section--intro h1.intro--h1 {
		font-size: 2.25rem;
	}

	.section--intro h2.intro--h2 {
		font-size: 1.65rem;
	}


}



/* ================================================================== */
@media screen and (min-width: 1400px) and (max-width: 1599px) {
	/* ================================================================== */

	/* header next pagge */
	.section--hero--portal {
		padding-bottom: 1rem;
	}

	.hero--portal--single.next--page {
		height: 375x;
	}

	.hero--portal--single img {
		height: 375px;
	}

	.hero--portal--accommodations .hero--headline--h2 {
		font-size: clamp(2rem, 3.75vw, 4.5rem);
	}

	.hero--portal--accommodations .hero--headline--sub {
		font-size: clamp(1.25rem, 1.85vw, 2.75rem);
	}


	/* intro */
	.section--intro h1.intro--h1 {
		font-size: 2.5rem;
	}

	.section--intro h2.intro--h2 {
		font-size: 1.75rem;
	}


}



/* ================================================================== */
@media screen and (min-width: 1600px) and (max-width: 1799px) {
	/* ================================================================== */


	.logo--box img {
		height: auto;
		max-width: 90%;
	}



}






@media (min-width: 2000px) {

	.container {
		max-width: 1700px;
	}

}