VogelSocialMedia/code/frontend/src/pages/about.css

.mainbox {
	max-width: 100vw;
}

@media screen and (min-width: 768px) {
	.mainbox {
		min-height: 60rem;
		margin-top: var(--Header-height);
	}
}

.explain {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	margin: 3vw;
}
.explain-pic {
	width: 90vw;
	margin: 2vw;
	border-radius: var(--border-radius);
	box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
	border-radius: 8px;
	border: 5px solid var(--Rotkehlchen-gray);
}
.explain-announce {
	width: 90vw;
	margin: 2vw;
	font-size: clamp(4rem, 8vw, 15vw);
	color: white;
	text-align: left;
}
.explain-title {
	margin: 1vw;
	min-width: 90vw;
	font-size: clamp(5rem, 10vw, 17vw);
	color: var(--Rotkehlchen-orange-default);
}
.explain-text {
	margin: 2vw;
	width: 90vw;
	max-width: 90vw !important;
	font-size: clamp(3.5rem, 7vw, 14vw);
	color: white;
	text-align: left;
}

.cursor-pointer {
	cursor: pointer;
}

.about-title {
	flex-direction: row;
	justify-content: start;
}

.intro {
	box-sizing: border-box;
	margin: 3vw;
	max-width: 94vw;
}
.block-l {
	height: clamp(24rem, 60vh, 100%) !important;
}

.block {
	max-width: calc(100vw-var(--margin-mobile));
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	justify-content: space-between;
	height: clamp(2rem, 45vh, 100%);
	margin: var(--margin-mobile);
	vertical-align: center;
	margin-block-end: var(--margin-mobile);
}
.block2 {
	display: grid;
	grid-template-areas:
		"text"
		"pic";
	grid-template-columns: 1fr;
}
.block2 .text1 {
	grid-area: text;
}
.block2 .pic2 {
	grid-area: pic;
	justify-self: start;
}
.block .pic-justify {
	justify-self: end;
}

.item {
	max-width: 90vw;
}
.pic {
	max-width: calc(80vw - var(--margin-mobile)) !important;
	border-radius: var(--border-radius);
	box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
	max-height: 19rem;
}

.text1 {
	height: 100%;
	color: white;
	font-size: 4rem;
}
.text-start {
	text-align: start;
	margin-right: 2vw;
}
.text-end {
	text-align: end;
	margin-left: 2vw;
}

@media screen and (min-width: 768px) {
	.explain-pic {
		max-height: clamp(600px, 120vh, 1200px);
		width: auto;
		justify-self: center;
	}
	.explain-title {
		margin: 1vw;
		min-width: 90vw;
		font-size: clamp(7rem, 10vw, 17vw);
		color: var(--Rotkehlchen-orange-default);
	}
	.about-title {
		flex-direction: row;
		justify-content: start;
	}

	.intro {
		box-sizing: border-box;
		margin: 2rem;
	}

	.block {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		justify-content: space-between;
		margin: 1rem;
		vertical-align: center;
		margin-block-end: 2rem;
	}
	.block2 {
		grid-template-areas: "pic text";
		grid-template-columns: auto 1fr;
		align-items: center;
	}

	.item {
		height: clamp(1rem, 30vw, 30vw);
		max-height: none;
	}

	.text1 {
		height: 100%;
		color: white;
		font-size: clamp(1rem, 8vw, 15vw);
		display: flex;
		align-items: center;
	}

	/* TODO Entfernen vor final*/
	.test {
		height: 100vh;
		width: 100vw;
		color: aqua;
		background-color: aquamarine;
	}
}