.frontpage__about {
	width: 100%;
	max-width: 100%;
	padding: 0;
	.about_title {
		padding: 2rem max(20px, calc((100% - 1200px) / 2)) 2rem
			max(20px, calc((100% - 1200px) / 2));
	}
	.about_image {
		width: 100%;
		height: 20rem;
		position: relative;
		img {
			width: 100%;
			position: absolute;
			top: 0;
		}
	}
	.about_content {
		width: 95%;
		padding: 5rem;
		padding-bottom: 4rem;
		margin: -10rem auto 0;
		background: color-mix(
			in srgb,
			var(--color-vibe-light) 70%,
			transparent
		);
		border-radius: 3rem;
		backdrop-filter: blur(0.5rem);
		box-shadow: 0px 4px 12px
			color-mix(in srgb, var(--color-vibe-dark) 15%, transparent);
		a {
			font: 700 1.6rem / 1.8rem var(--font-primary);
			text-decoration: none;
			color: var(--color-vibe-light);
			background: color-mix(
				in srgb,
				var(--color-vibe-blue-dark) 60%,
				transparent
			);
			padding: 0.9rem 1.4rem 0.9rem 3.4rem;
			border-radius: 2rem;
			position: relative;
			&:before {
				content: "";
				width: 1.8rem;
				height: 1.8rem;
				background-color: var(--color-vibe-yellow);
				mask-image: url(../assets/images/about-star.svg);
				-webkit-mask-image: url(../assets/images/about-star.svg);
				mask-size: cover;
				-webkit-mask-size: cover;
				position: absolute;
				left: 1.1rem;
				top: 50%;
				transform: translateY(-50%);
			}
		}
		p:first-child img {
			margin-bottom: 1rem;
		}
		p:last-child {
			margin-top: 3rem;
		}
	}
}

@media (min-width: 1366px) {
	.frontpage__about {
		.about_image {
			height: 44rem;
		}
		.about_content {
			width: 60%;
		}
	}
}