/*
 * Audience cards. Figma 2489:70375: head (header/XL title, body/M dark text 740
 * wide, 16 gap), 24 to a row of 3 x 390 cards, 25 apart. Card: photo 390x260
 * radius 16; icon tile 80x80 background-purple radius 16, 16px from the photo's
 * left and bottom edges, 64px primary icon; 16 to header/M title + body/S
 * text (8 gap). Mobile 2530:71814: header/L + body/S, stacked cards 24 apart,
 * photo 350x233.
 */

.audience-cards__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.audience-cards__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 765px;
}

.audience-cards__title { font: var(--f-header-xl); color: var(--c-text-dark); }
.audience-cards__text { max-width: 740px; font: var(--f-body-m); color: var(--c-text-dark); }

.audience-cards__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px 25px;
}

.audience-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.audience-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--r-m);
	overflow: hidden;
	background: var(--c-bg-grey);
}

.audience-card__badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: var(--r-m);
	background: var(--c-bg-purple);
}

.audience-card__icon { --icon-size: 64px; color: var(--c-primary); }

.audience-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.audience-card__title { font: var(--f-header-m); color: var(--c-text-dark); }
.audience-card__text { font: var(--f-body-s); color: var(--c-text-dark); }

@media (max-width: 767px) {
	.audience-cards__head { gap: 8px; }
	.audience-cards__title { font: var(--f-header-l); }
	.audience-cards__text { font: var(--f-body-s); }
	.audience-card__media { aspect-ratio: 350 / 233; }
}