#proof {
	background : var(--color-brown-main);
}

	#proof .container {
		display               : grid;
		grid-template-columns : 300px minmax(0, 1fr) 300px;
		column-gap            : 36px;
		align-items           : start;
		padding               : 0;
	}

	#proof :is(h1, h4, h5, small, .stars) {
		color : var(--color-bg-main);
	}

	#proof h1 {
	}
		#proof h1::first-line {
			color : #d4ae9ce0;
		}

	#proof h3 {
		color: #d4ae9ce0;
	}

	#proof .top {
		grid-column           : 1 / -1;
		display               : grid;
		grid-template-columns : 300px minmax(0, 1fr) 300px;
		column-gap            : 36px;
		align-items           : start;
		position              : relative;
	}

	#proof .top-image-left {
		height           : 150px;
		background-image : url("../img/image_10.png");
	}

	#proof .top-image-right {
		height              : 150px;
		background-image    : url("../img/image_07.png");
		background-position : center;
	}

	#proof .intro {
		max-width   : 520px;
		margin      : 0 auto;
	}

	#proof .proof-copy {
		grid-column   : 2 / -1;
		max-width     : 760px;
		margin        : -260px 0 28px;
		justify-self : start;
		display       : grid;
		row-gap       : 16px;
	}

	#proof .proof-copy h5 {
		margin      : 0;
		max-width   : 920px;
		line-height : 1.6;
	}

	#proof .proof-copy h5 b {
		color : #ffffff;
	}

	#proof .proof-subtitle {
		grid-column : 1 / -1;
		margin      : 0px auto 16px auto;
		text-align  : center;
	}

	#proof .carousel {
		grid-column : 1 / -1;
		position : relative;
		padding  : 0 74px;
	}

	#proof .carousel :is(small, .stars) {
		color : var(--color-brown-main);
	}

	#proof .arrow {
		position        : absolute;
		top             : 50%;
		transform       : translateY(-50%);
		width           : 56px;
		height          : 56px;
		border          : 0;
		border-radius   : 50%;
		background      : var(--color-bg-light);
		display         : inline-flex;
		align-items     : center;
		justify-content : center;
		cursor          : pointer;
		transition      : opacity 0.2s ease;
		z-index         : 2;
	}

	#proof .arrow:hover {
		opacity : 0.85;
	}

	#proof .arrow-prev {
		left : 0;
	}

	#proof .arrow-next {
		right : 0;
	}

@media (max-width : 980px) {
	#proof h1 {
		max-width : 100%;
	}

	#proof .container {
		display : block;
	}

	#proof {
		padding : 28px 0 36px;
	}

	#proof .top {
		grid-template-columns : 1fr;
		row-gap               : 18px;
		margin-bottom         : 26px;
	}

	#proof .top::after {
		display : none;
	}

	#proof .top-image-left,
	#proof .top-image-right {
		height       : 150px;
		justify-self : stretch;
	}

	#proof .intro {
		padding-top : 0;
		max-width   : 100%;
	}

	#proof .proof-copy {
		max-width : 100%;
		row-gap   : 14px;
		margin    : 0 auto 26px;
	}

	#proof .proof-copy h5 {
		max-width : 100%;
	}

	#proof .proof-subtitle {
		margin-bottom : 12px;
	}

	#proof .carousel {
		padding : 0 54px;
	}
}

@media (max-width : 640px) {
	#proof {
		padding : 22px 0 28px;
	}

	#proof .top {
		row-gap       : 14px;
		margin-bottom : 20px;
	}

	#proof .top-image-left,
	#proof .top-image-right {
		height : 110px;
	}

	#proof .proof-copy {
		row-gap : 12px;
		margin  : 0 auto 20px;
	}

	#proof .carousel {
		padding : 0 46px;
	}

	#proof .arrow {
		width  : 42px;
		height : 42px;
	}
}