.main-about{
	overflow: hidden;
}

	.about-grid{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		grid-gap: 2rem;
	}

		.about-grid > div{
			background-color: rgb(34, 93, 183);
			padding: 3rem;
			border-radius: .3rem;
			box-shadow: 0 0.6rem 1rem rgb(0 0 0 / 10%);
		}

			.about-grid > div h3{
				font-size: 2.6rem;
				font-weight: lighter;
				margin-bottom: 2rem;
				color: #fff;
			}

			.about-grid > div p{
				color: var(--gray-title);
			}

			.btn-white{
				padding-top: 1rem;
			}

			.btn-white > a{
				display: inline-block;
				background-color: #fff;
				padding: 0.8rem 3.3rem;
				font-weight: lighter;
				font-size: 1.6rem;
				letter-spacing: 0.1rem;
				color: #000;
				text-decoration: none;
				border-radius: 0.6rem;
				box-shadow: 0 0.3rem 1rem rgb(0 0 0 / 0.1);
				transition: 300ms all ease;
			}.btn-white > a:hover{
				transform: scale(1.1);
			}

.article-about{
	position: relative;
}

	.article-about > div{
		padding-left: 1rem;
	}

	.article-about::before{
		content: "";
		position: absolute;
		top: 0; left: 0; bottom: 0;
		display: block;
		width: .4rem;
		background-color: #225DB7;
		border-radius: 0.6rem;
	}

.block, .block-1{
	position: absolute;
	top: 30%; right: 0; bottom: 0; left: 43%;
	z-index: -1;
	transform: rotate(338deg);
	width: 50%;
	height: 50%;
	background-image: linear-gradient(
		to right, 
		var(--gray-full) 30%, 
		var(--gray-bg) 60%
	);
	border-radius: 6rem 8rem;
	box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.1);
}

.block-1{
	top: 70%; left: 5%;
	transform: rotate(210deg);
	background-image: linear-gradient(
		to bottom left, 
		var(--gray-full) 30%, 
		var(--gray-bg) 60%
	);
}

.about-flex{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 3rem;
}

	.about-flex > article{
		flex-basis: 50%;
	}

	.card{
		width: 70%;
		margin: auto;
		padding: 5rem;
		background-color: rgba(34, 93, 183, 0.1);
		backdrop-filter: blur(6px);
	}

		.card > h2{
			font-size: 2.9rem;
			margin-bottom: 2rem;
		}

@media screen and (max-width: 1300px){
	.card{
		width: 100%;
	}
}

@media screen and (max-width: 950px){
	.about-flex{
		flex-direction: column;
	}
}

@media screen and (max-width: 900px){
	.about-grid{
		grid-template-columns: 1fr;
	}
}