.dating-engine-promo {
	box-sizing: border-box;
	width: 100%;
	color: inherit;
}

.dating-engine-promo *,
.dating-engine-promo *::before,
.dating-engine-promo *::after {
	box-sizing: border-box;
}

.dating-engine-promo__title {
	margin: 0 0 1rem;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	line-height: 1.2;
}

.dating-engine-promo__grid {
	display: grid;
	grid-template-columns: repeat(var(--de-promo-columns, 3), minmax(0, 1fr));
	gap: 1rem;
}

.dating-engine-promo__profile {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: .35rem;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.dating-engine-promo__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: .65rem;
	background: #f2f4f8;
	line-height: 0;
}

.dating-engine-promo__media > .dating-engine-promo__photo,
.dating-engine-promo__media > img.dating-engine-promo__photo {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.dating-engine-promo__photo--placeholder {
	padding: 12%;
}

.dating-engine-promo__photo--placeholder .dating-engine-profile-avatar {
	display: block;
	width: 100%;
	height: 100%;
}

.dating-engine-promo__photo--placeholder .dating-engine-profile-avatar__halo {
	fill: #f7f8fb;
}

.dating-engine-promo__photo--placeholder .dating-engine-profile-avatar__head,
.dating-engine-promo__photo--placeholder .dating-engine-profile-avatar__body {
	fill: #aeb8c8;
}

.dating-engine-promo__name {
	overflow: hidden;
	color: var(--de-profiles-button-color, #de567e);
	font-weight: 700;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dating-engine-promo__age {
	font-size: .9rem;
	opacity: .72;
}

.dating-engine-promo__profile:hover .dating-engine-promo__name,
.dating-engine-promo__profile:focus-visible .dating-engine-promo__name {
	color: var(--de-profiles-button-hover-color, #c7466d);
}

.dating-engine-promo--sidebar .dating-engine-promo__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .8rem;
}

@media (max-width: 760px) {
	.dating-engine-promo:not(.dating-engine-promo--sidebar) .dating-engine-promo__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}