.compliance-block {
	
	padding: 80px var(--sideGap);
	
	& .text-description {
		width: 100%;
		max-width: 770px;
		margin: 0 auto 50px auto;
		& p {
			color: var(--color-text-gray);
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: 150%;
		}
	}
	
	& .container {
		padding: 0;
	}
	
	& .row {
		margin-top: 50px;
		gap: 24px;
		display: grid;
		@media (max-width: 911px) {
			display: flex;
			flex-direction: column;
		}
	}
	
	& .compliance-item {
		border-radius: 20px;
		background: #F5F5F7;
		display: flex;
		padding: 20px;
		position: relative;
		overflow: hidden;
		
		& .img-wrap img {
			position: relative;
		}
		
		&.cover .img-wrap img {
			object-fit: cover;
			position: static;
		}
		
		& .img-wrap {
			margin-left: -20px;
			margin-right: -20px;
			margin-bottom: -20px;
			position: relative;
			
			& img {
				margin: 0 auto;
				display: block;
				object-fit: contain;
			}
			
			&::before {
				content: '';
				position: absolute;
				height: 100%;
				width: 100%;
				left: 0;
				top: 0;
				background-repeat: repeat-x;
				background-image: url('data:image/svg+xml,<svg width="713" height="260" viewBox="0 0 713 260" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M167.202 116.237L70.3319 -85.5008L264.073 -85.5007L167.202 116.237Z" fill="%23272728" fill-opacity="0.1"/><path d="M40.7983 -86.0161L115.01 67.6576L-33.4139 67.6575L40.7983 -86.0161Z" fill="%23272728" fill-opacity="0.1"/><path d="M250.468 4.17287L324.68 157.847L176.256 157.846L250.468 4.17287Z" fill="%23272728" fill-opacity="0.1"/><path d="M55.1873 179.442L11.0164 87.2818L99.3582 87.2818L55.1873 179.442Z" fill="%23272728" fill-opacity="0.1"/><path d="M255.164 296.5L199.934 181.266L310.393 181.266L255.164 296.5Z" fill="%23272728" fill-opacity="0.1"/><path d="M479.929 -45.6421L383.058 156.096L576.799 156.096L479.929 -45.6421Z" fill="%23272728" fill-opacity="0.1"/><path d="M587.784 179.442L490.914 381.18L684.655 381.18L587.784 179.442Z" fill="%23272728" fill-opacity="0.1"/><path d="M353.521 156.611L427.733 2.93766L279.309 2.93768L353.521 156.611Z" fill="%23272728" fill-opacity="0.06"/><path d="M567.531 66.4258L641.743 -87.2479L493.319 -87.2479L567.531 66.4258Z" fill="%23272728" fill-opacity="0.06"/><path d="M126.491 89.4717L223.464 290.278L29.5174 290.278L126.491 89.4717Z" fill="%23272728" fill-opacity="0.1"/><path d="M340.455 178.445L414.667 332.119L266.242 332.119L340.455 178.445Z" fill="%23272728" fill-opacity="0.1"/><path d="M465.497 381.897L562.47 181.091L368.523 181.091L465.497 381.897Z" fill="%23272728" fill-opacity="0.1"/><path d="M646.21 240.417L720.423 86.7438L571.998 86.7438L646.21 240.417Z" fill="%23272728" fill-opacity="0.1"/><path d="M637.344 -25.9219L593.173 66.2382L681.514 66.2382L637.344 -25.9219Z" fill="%23272728" fill-opacity="0.1"/></svg>');
			}
			
			&::after {
				--angle: 0deg;
				content: '';
				position: absolute;
				width: 100%;
				height: 142px;
				background: linear-gradient(var(--angle),rgba(245, 245, 247, 1) 0%, rgba(245, 245, 247, 0) 100%);
				left: 0;
				bottom: 0;
			}
		}
		
		& h3 {
			color: #343A40;
			font-size: 20px;
			font-style: normal;
			font-weight: 600;
			line-height: 125%;
			margin: 0 0 12px 0;
			padding-right: 50px;
		}
		
		& p {
			color: #77797E;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 150%;
			letter-spacing: 0.08px;
			margin: 0;
		}
		
		& img.icon {
			width: 32px;
			height: 32px;
			object-fit: contain;
			margin-bottom: 16px;
		}
		
	}
	
	& :is(.variant-2, .variant-3, .variant-4, .variant-5) .row {
		grid-template-rows: auto;
	}
	
	& .variant-2 .row,
	& .variant-3 .row {
		grid-template-columns: 36% 1fr 1fr;
	}
	
	& .variant-4 .row {
		grid-template-columns: 36% 1fr 1fr;
	}
	
	& .variant-5 .row {
		grid-template-columns: repeat(3, 1fr); 
	}
		
	& :is(.variant-2, .variant-3, .variant-4, .variant-5) .compliance-item:nth-child(1),
	& .variant-4 .compliance-item:nth-child(4),
	& .variant-5 .compliance-item:not(:nth-child(2)) {
		grid-area: 1 / 1 / 3 / 2;
		flex-direction: column;
		& .img-wrap {
			margin-top; 20px;
			& img {
				height: 290px;
				z-index: 1;
			}
			&::after {
				height: 100%;
				--angle: -180deg;
			}
		}
	}
		
	& .variant-2 .compliance-item:nth-child(2),
    & .variant-4 .compliance-item:nth-child(2),
	& .variant-4 .compliance-item:nth-child(3),
	& .variant-5 .compliance-item:nth-child(2) {
			grid-area: 1 / 2 / 3 / 4;
			flex-direction: column;
			& .img-wrap {
				order: -1;
				margin-top: -20px;
				margin-bottom: 0;
				& img {
					width: 100%;
					height: 260px;
				}
			}
	}
	
	& .variant-3 {
		& .compliance-item:nth-child(2),
		& .compliance-item:nth-child(3) {
			grid-area: 1 / 2 / 2 / 4;
			flex-direction: row;
			& .content-wrap {
				flex: 1;
			}
			& .img-wrap {
				width: 44%;
				margin-left: 0;
				margin-top: -20px;
				& img {
					width: 100%;
					height: 100%;
				}
				&::after {
					--angle: 90deg;
					height: 100%;
					width: 142px;
				}
			}
		}
		& .compliance-item:nth-child(3) { 
			grid-area: 2 / 2 / 3 / 4;
		}
	}

	& .variant-4 .compliance-item:nth-child(2) {
		grid-area: 1 / 2 / 3 / 4;
	}

	& .variant-4 .compliance-item:nth-child(3) {
 		grid-area: 3 / 1 / 5 / 3;
	}
	
	& .variant-4 .compliance-item:nth-child(4) {
		grid-area: 3 / 3 / 5 / 4;
	} 
	
	& .variant-5 .compliance-item:nth-child(3) {
		 grid-area: 3 / 1 / 5 / 2;
	}
	
	& .variant-5 .compliance-item:nth-child(4) {
		grid-area: 3 / 2 / 5 / 3;
	}
	
	& .variant-5 .compliance-item:nth-child(5) {
		grid-area: 3 / 3 / 5 / 4;
	}
	
	@media (max-width: 991px) {
		
		& :is(.variant-2, .variant-3, .variant-4, .variant-5) .row {
			display: flex;
			flex-direction: column;
		}
		
		& :is(.variant-2, .variant-3, .variant-4, .variant-5) .compliance-item:nth-child(n) {
			flex-direction: column;
			& .img-wrap {
				margin-top; 20px;
				margin-left: -20px;
				margin-right: -20px;
				width: auto;
				& img {
					height: 290px;
				}
				&::after {
					height: 100%;
					--angle: -180deg;
					width: 100%;
					top: 0;
				}

			}
		}
	}
	
}