.quote {
    display: flex;
	gap: 100px;
    min-height: 810px;
	padding-top: 170px;
	padding-bottom: 130px;
	background-color: var(--bg-color);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.quote .quote__left {
	display: flex;
	flex-direction: column;
	width: 57%;
}

.quote .quote__text {
	color: var(--content-color, var(--blue-dark));
}

.quote .quote__text::before {
    content: "“";
}

.quote .quote__text::after {
    content: "”";
}

.quote .quote__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 43%;
	margin-top: 20px;
}

.quote .quote-author__image {
	display: flex;
	width: 100%;
	max-width: 370px;
	aspect-ratio: 1;
}

.quote .quote-author__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quote .quote-author__name {
    width: 100%;
	max-width: 370px;
	color: var(--content-color, var(--blue-dark));
}

.quote .quote-author__name:not(:first-child) {
	margin-top: 24px;
}

.quote .quote-author__description {
    width: 100%;
	max-width: 370px;
	color: var(--content-color, var(--blue-dark));
}

.quote .quote-author__description:not(:first-child) {
	margin-top: 10px;
}

@media (max-width: 1024px) {
	.quote {
		gap: 70px;
		min-height: 600px;
		padding-top: 130px;
		padding-bottom: 100px;
	}

	.quote .quote__left {
		width: 65%;
	}

	.quote .quote__right {
		width: 35%;
	}

	.quote .quote-author__image,
	.quote .quote-author__name,
	.quote .quote-author__description {
		max-width: 250px;
	}
}

@media (max-width: 767px) {
	.quote {
		flex-wrap: wrap;
		gap: 40px;
		min-height: auto;
		padding-block: 60px;
	}

	.quote .quote__left {
		width: 100%;
	}

	.quote .quote__right {
		width: 100%;
		margin-top: 0;
	}

	.quote .quote-author__image,
	.quote .quote-author__name,
	.quote .quote-author__description {
		max-width: 180px;
	}
}