@CarouselHeight: calc(var(--app-height) - 200px);
@CarouselWidth: calc(@CarouselHeight * 1.5);

.page__home {

	@media (max-width: @responsiveDesktop) {
		.header {
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.title {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle,rgba(0, 0, 0,0.4) 0%, rgba(0, 0, 0, 0) 300%);
		z-index: 1;

		.h1 {
			line-height: 1;
			background-image: @gradientTitleDark;

			@media (min-width: @responsiveDesktop) and (max-width: @responsiveDesktopM) {
				line-height: 0.9;
			}

			a { font-weight: 900 }

			span {
				font-weight: 900;
				background-image: @gradientTextRed;
			}
		}
	}

	.footer { padding-top: 20px }

	.landscape & {
		.carousel {
			width: @CarouselWidth;
			height: @CarouselHeight;
		}
		.title {
			.h1 { font-size: calc(var(--app-height) / 8.5) }
		}
	}
	.portrait & {

		.carousel { max-width: 96% }

		.title {
			.h1 {
				font-size: 12vw;

				@media (max-width: @responsiveDesktop) {
					font-size: 10vw;
				}
			}
		}
	}
}