/**
 * Where It Works Best Section
 */

.where-it-works-best-section.white {
	background: var(--white);
}
.where-it-works-best-section.gray {
	background: var(--gray);
}
.where-it-works-best-section .row {
	row-gap: 30px;
	justify-content: center;
}
.where-it-works-best-section .col {
	width: 33.333%;
	display: flex;
}
.where-it-works-best-section .section-header .desc{
	max-width: 910px;
	margin-left: auto;
	margin-right: auto;
}
.where-it-works-best-section.two-col .section-header .desc{
	max-width: 675px;
}
.where-it-works-best-section.two-col .col {
	width: 50%;
}
.where-it-works-best-section .card-block {
	width: 100%;
	background: var(--gray);
	border-radius: 30px;
	padding: 40px;
	display: flex;
	flex-direction: column;
}
.where-it-works-best-section.gray .card-block {
	background: var(--white);
}
.where-it-works-best-section .illustration {
    margin-bottom: 30px;
	padding-top: 80%;
	position: relative;
	height: 438px;
}
.where-it-works-best-section .illustration img {
	position: absolute;
    left: 0;
    width: auto;
    object-fit: contain;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    right: 0;
    margin: 0 auto;
}
.where-it-works-best-section .card-block h3 {
    color: var(--blue);
}
.where-it-works-best-section.three-col .card-block {
    padding: 32px 32px 40px;
}
.where-it-works-best-section.three-col .illustration{
	height: 321px;
}
.where-it-works-best-section.three-col .card-block h3 {
    color: var(--black);
}
@media only screen and (min-width: 1200px) {
	.where-it-works-best-section .section-header{
		margin-bottom: 54px;
	}
}
@media only screen and (max-width: 991px) {
	.where-it-works-best-section .col {
		width: 50%;
	}
	.where-it-works-best-section .card-block {
		padding: 30px;
	}
	.where-it-works-best-section .illustration{
		height: 320px;
	}
	.where-it-works-best-section.three-col .illustration {
		height: 270px;
	}
}
@media only screen and (max-width: 767px) {
	.where-it-works-best-section .col,
	.where-it-works-best-section.two-col .col {
		width: 100%;
	}
	.where-it-works-best-section .card-block {
		padding: 24px;
		border-radius: 18px;
	}
	.where-it-works-best-section .illustration {
		margin-bottom: 20px;
		height: auto;
	}
	.where-it-works-best-section.three-col .illustration{
		height: auto;
	}
	.where-it-works-best-section.three-col .card-block {
		padding: 24px;
	}
	.where-it-works-best-section .illustration img {
		height: 100%;
	}	
}