/* Figma Product - template: 2473:1750 and 2473:1786. Images are product data. */
.tpx-recommendations {
	width: 100%;
	min-width: 0;
	font-family: var(--wp--preset--font-family--aktiv-grotesk, aktiv-grotesk, sans-serif);
	container-type: inline-size;
}
.tpx-recommendations *, .tpx-recommendations *::before, .tpx-recommendations *::after { box-sizing: border-box; }
.tpx-recommendations .tpx-recommendations__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	background: none;
	color: var(--wp--preset--color--white, #fff);
}
.tpx-recommendations__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--sm, 24px);
	min-width: 0;
	padding: var(--wp--preset--spacing--md, 45px) clamp(24px, 4cqw, 60px);
	grid-column: 1;
	grid-row: 1;
}
.tpx-recommendations__title { display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.tpx-recommendations .tpx-recommendations__eyebrow {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--wp--preset--color--smoke, #f2f2f2);
	overflow-wrap: anywhere;
}
.tpx-recommendations .tpx-recommendations__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--aktiv-grotesk-extended, aktiv-grotesk-extended, sans-serif);
	font-size: var(--wp--preset--font-size--md, 24px);
	font-weight: 800;
	line-height: 1.125;
	letter-spacing: -.02em;
	text-transform: uppercase;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	color: var(--wp--preset--color--white, #fff);
	overflow-wrap: anywhere;
}
.tpx-recommendations__description {
	max-width: 550px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3334;
	letter-spacing: 0;
	color: rgb(242 242 242 / 65%);
	overflow-wrap: anywhere;
}
.tpx-recommendations .tpx-recommendations__description p { margin: 0 0 16px; font: inherit; color: inherit; }
.tpx-recommendations .tpx-recommendations__description p:last-child { margin-bottom: 0; }
.tpx-recommendations a.tpx-recommendations__button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	min-height: 44px;
	padding: 22px 20px;
	border: 1px solid rgb(255 255 255 / 30%);
	border-radius: 999px;
	background: rgb(255 255 255 / 20%);
	backdrop-filter: blur(7.5px);
	color: var(--wp--preset--color--white, #fff);
	font: 600 16px/1.3334 var(--wp--preset--font-family--aktiv-grotesk, aktiv-grotesk, sans-serif);
	letter-spacing: 0;
	text-decoration: none;
	text-align: center;
	overflow-wrap: anywhere;
}
.tpx-recommendations a.tpx-recommendations__button:hover { background: rgb(255 255 255 / 30%); }
.tpx-recommendations a.tpx-recommendations__button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.tpx-recommendations__media { position: relative; width: 100%; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; align-self: center; overflow: hidden; background: #000; grid-column: 2; grid-row: 1; }
.tpx-recommendations .tpx-recommendations__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; object-position: center; }
.tpx-recommendations__row:nth-child(even) .tpx-recommendations__content { grid-column: 2; }
.tpx-recommendations__row:nth-child(even) .tpx-recommendations__media { grid-column: 1; }
.tpx-recommendations .tpx-recommendations__row--no-image { grid-template-columns: minmax(0, 1fr); }
.tpx-recommendations .tpx-recommendations__row--no-image .tpx-recommendations__content { grid-column: 1; min-height: 300px; }
@container (max-width: 781px) {
	.tpx-recommendations .tpx-recommendations__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.tpx-recommendations .tpx-recommendations__row .tpx-recommendations__content { grid-column: 1; grid-row: 1; padding: 40px 24px; }
	.tpx-recommendations .tpx-recommendations__row .tpx-recommendations__media { grid-column: 1; grid-row: 2; }
	.tpx-recommendations a.tpx-recommendations__button { padding: 18px 20px; }
}
@media (max-width: 781px) {
	.tpx-recommendations .tpx-recommendations__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.tpx-recommendations .tpx-recommendations__row .tpx-recommendations__content { grid-column: 1; grid-row: 1; padding: 40px 24px; }
	.tpx-recommendations .tpx-recommendations__row .tpx-recommendations__media { grid-column: 1; grid-row: 2; }
	.tpx-recommendations a.tpx-recommendations__button { padding: 18px 20px; }
}