/* Rise With Teagan — testimonial screenshots
   ------------------------------------------------------------------
   Figma 1437-4445. Three cards filling the row.

   The drawn widths are 360.8 / 379.8 / 370.3 in a 1120 container with 4.6px
   gaps. That averages to 370.3, which is exactly (1120 - 2 gaps) / 3 — so they
   are equal thirds, and the odd numbers are just hand-nudged placement. Equal
   flex children reproduce it and fill whatever container they are dropped into.

   The stagger is not offsets either: the cards are different heights, centred
   against each other. Centring reproduces the drawn y values to the pixel
   (37.6 / 0 / 8.0).

   No box-shadow and no background. Both belong to the screenshots themselves —
   anything added here sits on top of what the image already carries and fights
   it. The cards are whatever the PNG is, on whatever ground it is placed.     */

.rwt-proof {
	display: flex;
	align-items: center;
	gap: 5px;
}

.rwt-proof__item {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/* Specificity note: .woocommerce img { height: auto } is (0,1,1) and beats a
   single class. This is (0,1,1) as well, and wants height:auto regardless. */
.rwt-proof .rwt-proof__img {
	display: block;
	width: 100%;
	height: auto;
	background: transparent;
}

/* Three 370px cards cannot share a phone. Stacked, each one gets to be legible
   at its natural size rather than a third of the width. */
@media ( max-width: 800px ) {

	.rwt-proof {
		flex-direction: column;
		align-items: center;
		gap: 22px;
	}

	.rwt-proof__item {
		flex: 0 0 auto;
		width: 100%;
		max-width: 400px;
	}
}