:root {
	--column-gap: 2.5rem;

	--color-background-light: #f3f3f3;
	--color-secondary: #3ecbc5;

	@media (width < 48em) {
		--column-gap: 1rem;
	}
}

main.content {
	overflow-x: hidden;
	@media (width < 48rem) {
		--gap: 2rem;
	}
}

section {
	&.collage-1 {
		background-image: url('../img/collage-1@2x.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		margin-block-start: 12rem;
		overflow: hidden;
		min-height: 43rem;
		transition: background-position 0.1s ease-out;

		@media (width < 48rem) {
			margin-block-start: 8.266rem;
			min-height: 46.4vw;
			max-height: 46.4vw;
			padding: 0;
		}
	}

	&.collage-2 {
		background-image: url('../img/collage-2@2x.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		margin-block-start: 0;
		overflow: hidden;
		min-height: 46.4vw;
		transition: background-position 0.1s ease-out;

		@media (width < 48rem) {
			margin-block-start: 2rem;
			padding: 0;
		}
	}
}

.innovations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, min-content);
	grid-template-areas:
		'h h h'
		'p p p'
		'a1 a2 a3'
		'b b b';
	column-gap: var(--column-gap);
	row-gap: 1rem;

	@media (width < 48em) {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(6, min-content);
		grid-template-areas:
			'h'
			'p'
			'a1'
			'a2'
			'a3'
			'b';
	}

	&::before,
	&::after {
		content: none !important;
	}

	article {
		background-color: var(--color-background-light);
		padding: 2.2rem;

		@media (width < 48em) {
			justify-self: center;
		}
	}

	h3 {
		grid-area: h;
		font-weight: 700;

		@media (width < 48em) {
			margin-block-end: 0;
		}
	}

	p {
		grid-area: p;
	}

	.btn {
		grid-area: b;
		justify-self: center;
		margin-block-start: 3rem;
		margin-block-end: 0;

		@media (width < 48em) {
			margin-block-start: 1rem;
			width: 100%;
			justify-content: center;
		}
	}
}

#expo {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, min-content);
	grid-template-areas:
		'h h h h h h'
		'p p p p p p'
		's1 s1 s1 s2 s2 s2'
		'p1 p1 p1 p1 p1 p1'
		'a a a a a a'
		'a a a a a a';
	gap: var(--column-gap);

	@media (width < 48em) {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(11, min-content);
		grid-template-areas:
			'h'
			'p'
			's1'
			's2'
			'p1'
			'a'
			'a'
			'a'
			'a'
			'a'
			'a';
	}

	&::before,
	&::after {
		content: none;
	}

	h3 {
		grid-area: h;

		@media (width < 48em) {
			margin-block-end: 0;
		}
	}

	p {
		&:first-of-type {
			grid-area: p;
		}
		&:last-of-type {
			grid-area: p1;
		}
	}

	section {
		padding: 2.2rem;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, min-content);
		grid-template-areas:
			'h h'
			'a a'
			'a a';
		background-color: var(--color-background-light);
		border-radius: 1rem;
		column-gap: 3.5rem;
		row-gap: 2rem;

		@media (width < 48em) {
			grid-template-columns: 1fr;
			grid-template-rows: repeat(5, min-content);
			grid-template-areas:
				'h'
				'a'
				'a'
				'a'
				'a';

			justify-self: center;
		}

		h4 {
			grid-area: h;
			text-align: center;
			font-weight: 700;
		}

		article {
			margin-block-end: 1.5rem;
		}

		&:first-of-type {
			grid-area: s1;
		}
		&:last-of-type {
			grid-area: s2;
		}
	}

	& > article {
		padding: 2.2rem;
		grid-column: span 2;
		background-color: var(--color-background-light);
		border-radius: 1rem;

		@media (width < 48em) {
			grid-column: span 1;
			justify-self: center;
		}
	}

	.exclam-mark {
		margin-block-start: 3rem;
		margin-block-end: 0.5rem;

		@media (width < 48em) {
			margin-block-start: 1.4rem;
			margin-block-end: 1rem;
		}
	}
}

.btn--large {
	display: flex;
	align-items: center;
	padding: 1.3rem 2.8rem;
	gap: 1rem;

	@media (width < 48em) {
		padding: 1rem;
	}

	h4 {
		margin: 0;
	}
}

article.feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
	border-radius: 1rem;
	max-width: 400px;

	h4 {
		margin: 0;
		font-weight: 700;
	}

	p {
		margin: 0;
	}

	.img {
		width: 75px;
		height: 75px;
	}
}

.txt-secondary {
	color: var(--color-secondary);
	font-weight: 700;
}

.exclam-mark {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-weight: 700;
	font-size: 2.2rem;

	@media (width < 48em) {
		font-size: 1.6rem;
		line-height: 2.1rem;
	}

	&::before {
		content: '!';
		font-size: 7.2rem;
		line-height: 1;
		color: var(--color-secondary);
		padding-inline: 1rem;
	}
}

#apply {
	text-align: center;

	@media (width < 48em) {
		.heading-3 {
			margin-block-start: 3rem;
			margin-block-end: 1rem;
		}
	}

	.btn {
		display: inline-flex;
		margin-block-start: 1rem;
		margin-block-end: 1.5rem;

		@media (width < 48em) {
			width: 100%;
			justify-content: center;
		}
	}
}

#organizes {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5rem;

	&::before,
	&::after {
		content: none;
	}

	@media (width < 48em) {
		flex-direction: column;
		gap: 2rem;
	}

	p {
		width: min-content;
		text-align: right;
		@media (width < 48em) {
			width: auto;
			text-align: center;
			font-size: 2.2rem;
			line-height: 2.7rem;
			margin-block-start: 3rem;
		}
	}
}

.decorated.heading-3 {
	@media (width < 48em) {
		& > span {
			max-width: 71%;

			&::before,
			&::after {
				margin: 0 15px;
			}
		}
	}
}