alpinesmuseum-public/assets/less/components/InfoView.less

.InfoView {
	padding: (2 * @spacing) @spacing;
	padding-left: @modal-left-spacing;
	padding-right: 0;
	@media @phone {
		padding-top: 62px;
		padding-left: @spacing;
	}
	h1 {
		margin: 0;
		transform: translateY(4px);
		padding-top: @spacing * 6;
		padding-right: @spacing * 2;
		@media @tablet {
			padding-top: @spacing * 4;
		}
		@media @phone {
			padding-top: @spacing * 3;
		}
	}
	.link {
		text-decoration: underline;
		text-decoration-color: @accent-color;
	}
	p {
		margin-bottom: 0;
	}
}

.InfoContent {
	font-weight: 500;
	max-width: 1100px;
	padding-right: @spacing;

	p.medium-text a {
		text-decoration: underline;
		text-decoration-color: @accent-color;
	}
}

.ImagesList {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
}

.InfoView .ImagesList {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
}
.ImageWithLegend {
	display: flex;
	flex-direction: column;
	img {
		height: 550px;
		padding-top: 2 * @spacing;
		padding-right: @spacing;
		padding-bottom: @spacing;
		@media @phone {
			height: 250px;
		}
	}
}

// LOGO
.InfoContent a img {
	width: 170px;
	height: 148px;
	display: block;
	margin: 43px 0 24px 24px;
}

.InfoView-newsletter {
	background-color: @accent-color;
	padding: (2 * @spacing) @spacing;
	padding-left: @modal-left-spacing;
	padding-right: @modal-left-spacing;
	@media @phone {
		padding-left: @spacing;
		padding-right: @spacing;
	}
	a:hover {
		opacity: 0.6;
	}
}

.InfoView-sponsors {
	padding: (2 * @spacing) @spacing;
	padding-right: @modal-left-spacing;
	max-width: 1100px + 2 * @modal-left-spacing;

	@media (max-width: 890px) {
		padding-right: @spacing;
	}

	.CVForm {
		padding-top: 4 * @spacing;
		label {
			align-items: flex-start;
			min-width: 111px;
		}
		@media (max-width: 450px) {
			display: flex;
			flex-direction: column;
		}
	}
}

.InfoView-sponsors--items {
	width: 100%;
	max-width: 600px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	.InfoView-sponsors--item {
		width: 30%;
		padding-bottom: 3 * @spacing;
		@media (max-width: 590px) {
			width: 48%;
		}
		@media (max-width: 450px) {
			width: 100%;
		}
	}

	padding-left: 2 * @spacing;
	@media (max-width: 450px) {
		padding-left: 0;
	}
}
.innovationspartner {
	flex-wrap: wrap;
	padding-right: @modal-left-spacing;

	@media @phone {
		padding-right: 0;
	}
	.InfoView-sponsors--items {
		display: flex;
		max-width: 300px;
		padding-left: 2 * @spacing;

		.InfoView-sponsors--item {
			padding: 0;
			width: 100%;
			img {
				max-width: 100%;
			}
		}

		@media (max-width: 450px) {
			padding-left: 0;
			img {
				width: 100%;
				max-width: 100%;
			}
		}
	}
	p {
		padding-left: 111px + 2 * @spacing;
		width: 100%;
		max-width: 600px + 111px;
		@media (max-width: 450px) {
			padding-left: 0;
		}
	}
}

.InfoView-sponsors--item {
	display: flex;
	align-items: flex-start;

	img {
		width: 100%;
		max-width: 120px;

		@media (max-width: 450px) {
			width: 70%;
			margin: auto;
		}
	}
}

.InfoView-footer {
	text-align: center;
	padding: 2 * @spacing;
	a {
		cursor: pointer;
		text-decoration: underline;
		&:hover {
			opacity: 0.6;
		}
	}
}

.embedded-youtube-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
	& > * {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
}