/* 12-careers-whywework — Careers "Why we work here" reviews carousel.
 * Bug: on mobile (<=767px) the per-slide background photo is centered
 * (inherits .bg-center => background-position:center), so the subject's head
 * is cropped and the image visually overwhelms the card. Production positions
 * each photo via a per-slide hint exposed as the inline CSS custom property
 * `--mob-bg-pos` (e.g. "right bottom", "center top"). The staging theme CSS
 * only forces background-size:cover at this breakpoint and never consumes
 * --mob-bg-pos, leaving the centered crop.
 *
 * Fix: at mobile, honor the per-slide --mob-bg-pos (falling back to the
 * desktop "right bottom" framing) so each photo frames its subject like prod.
 * Additive, scoped to #why-we-work-here. Enqueued after overrides.css.
 */
@media (max-width: 767px) {
  #why-we-work-here .review-container__background-image {
    background-position: var(--mob-bg-pos, right bottom) !important;
  }
}
.review-container__content {
	gap: 8px;
	justify-content: flex-start;
	width: 70%;
	margin-top: 24px;
}
@media (min-width: 600px and max-width: 789px) {
	.review-container__content__description {
		font-size: 20px;
		color: #000;
		line-height: 28px;   
	}
	.review-container__content {		
        margin: 2rem 1rem 1rem 2rem;
		width: 65%;
		margin-top: 48px;
	}
}
@media (max-width: 599px) {
	.review-container__content__description {
		font-size: 16px;
		color: #000;
		line-height: 28px;    
		width: 96%;
	}	
	.review-container__content {		
		width: 100%;
	}
	.review-container__background-image {
		background-position: 50%;
		background-image: url("/wp-content/uploads/2026/06/sofia-p-mobile.jpeg");
		background-size: cover;
		height: 100%;
		left: 0;
		position: absolute;
		width: 100%;
		bottom: 0;
	}
	.review-container__content__author {
		font-size: 16px;
		color: #000;
		line-height: 28px;
	}
	.review-container__content__designation {
		font-size:14px;
		width: 50%;
		color: #000;
		line-height: 28px;
	}
}
.review-container .carousel-panel {
	padding: 0px 20px;
}

#target .target-card__description {
	width: 98%;
}