.bgm-ad-slot {
	--bgm-ad-paper: color-mix(in srgb, var(--bgm-color-surface, #fff) 94%, var(--bgm-color-bg, #fbfcf8));
	--bgm-ad-rule: color-mix(in srgb, var(--bgm-color-border, #d7e1dc) 82%, transparent);
	width: 100%;
	padding: clamp(1.75rem, 4vw, 3.25rem) var(--bgm-gutter, clamp(1rem, 4vw, 3rem));
	background: var(--bgm-color-bg, #fbfcf8);
}

.bgm-ad-shell {
	display: flex;
	width: min(100%, var(--bgm-container, 1160px));
	margin-inline: auto;
	flex-direction: column;
	align-items: center;
}

.bgm-ad-label {
	display: block;
	width: min(100%, var(--bgm-ad-width));
	margin-block-end: .55rem;
	color: var(--bgm-color-text-soft, #74807c);
	font-size: .62rem;
	font-weight: 760;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
}

.bgm-ad-unit {
	width: min(100%, var(--bgm-ad-width));
	aspect-ratio: var(--bgm-ad-ratio);
	min-height: 0;
	container-type: inline-size;
}

.bgm-ad-card {
	position: relative;
	display: grid;
	overflow: hidden;
	border: 1px solid var(--bgm-ad-rule);
	border-radius: 12px;
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--bgm-color-primary, #146c62) 6%, transparent), transparent 52%),
		var(--bgm-ad-paper);
	box-shadow: 0 .8rem 2rem rgb(22 32 29 / .07);
	color: var(--bgm-color-text, #16201d);
	text-decoration: none;
	isolation: isolate;
}

a.bgm-ad-card {
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

a.bgm-ad-card:is(:hover, :focus-visible) {
	border-color: color-mix(in srgb, var(--bgm-color-primary, #146c62) 55%, var(--bgm-ad-rule));
	box-shadow: 0 1rem 2.4rem rgb(22 32 29 / .13);
	color: var(--bgm-color-text, #16201d);
	transform: translateY(-2px);
}

a.bgm-ad-card:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--bgm-color-primary, #146c62) 72%, white);
	outline-offset: 3px;
}

.bgm-ad-card__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	overflow: hidden;
	background: var(--bgm-color-border, #d7e1dc);
}

.bgm-ad-card__media::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(15deg, rgb(10 19 16 / .83) 0%, rgb(10 19 16 / .34) 58%, transparent 100%);
}

.bgm-ad-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
}

a.bgm-ad-card:hover .bgm-ad-card__media img {
	transform: scale(1.025);
}

.bgm-ad-card__copy {
	display: flex;
	width: 100%;
	height: 100%;
	padding: clamp(1rem, 8%, 1.6rem);
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: .42rem;
}

.bgm-ad-card.has-media .bgm-ad-card__copy {
	color: #fff;
	text-shadow: 0 1px 18px rgb(0 0 0 / .28);
}

.bgm-ad-card__copy small {
	color: var(--bgm-color-primary, #146c62);
	font-size: .64rem;
	font-style: normal;
	font-weight: 780;
	letter-spacing: .12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.bgm-ad-card.has-media .bgm-ad-card__copy small,
.bgm-ad-card.has-media .bgm-ad-card__copy em {
	color: #e8c768;
}

.bgm-ad-card__copy strong {
	max-width: 19ch;
	font-family: var(--bgm-font-display, Georgia, serif);
	font-size: clamp(1.25rem, 9cqw, 1.85rem);
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1.03;
}

.bgm-ad-card__copy > span {
	display: -webkit-box;
	max-width: 38ch;
	overflow: hidden;
	color: var(--bgm-color-text-muted, #4b5a55);
	font-size: .82rem;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.bgm-ad-card.has-media .bgm-ad-card__copy > span {
	color: rgb(255 255 255 / .88);
}

.bgm-ad-card__copy em {
	color: var(--bgm-color-primary, #146c62);
	font-size: .75rem;
	font-style: normal;
	font-weight: 760;
}

.bgm-ad-card--leaderboard {
	border-radius: 10px;
}

.bgm-ad-card--leaderboard .bgm-ad-card__media::after {
	background: linear-gradient(90deg, rgb(10 19 16 / .83), rgb(10 19 16 / .2) 76%, transparent);
}

.bgm-ad-card--leaderboard .bgm-ad-card__copy {
	padding: .7rem 1.1rem;
	justify-content: center;
	gap: .18rem;
}

.bgm-ad-card--leaderboard .bgm-ad-card__copy strong {
	font-size: clamp(1rem, 3cqw, 1.35rem);
}

.bgm-ad-card--leaderboard .bgm-ad-card__copy > span {
	display: none;
}

.bgm-ad-card--leaderboard .bgm-ad-card__copy small,
.bgm-ad-card--leaderboard .bgm-ad-card__copy em {
	font-size: .56rem;
}

.bgm-ad-card--vertical .bgm-ad-card__copy {
	padding: 1.2rem;
}

.bgm-ad-card--vertical .bgm-ad-card__copy strong {
	font-size: clamp(1.35rem, 12cqw, 1.9rem);
}

.bgm-ad-card--mobile-banner {
	border-radius: 9px;
}

.bgm-ad-card--mobile-banner .bgm-ad-card__media::after {
	background: linear-gradient(90deg, rgb(10 19 16 / .85), rgb(10 19 16 / .2));
}

.bgm-ad-card--mobile-banner .bgm-ad-card__copy {
	padding: .5rem .85rem;
	justify-content: center;
	gap: .1rem;
}

.bgm-ad-card--mobile-banner .bgm-ad-card__copy strong {
	font-family: var(--bgm-font-body, Arial, sans-serif);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.bgm-ad-card--mobile-banner .bgm-ad-card__copy > span {
	display: none;
}

.bgm-ad-card--mobile-banner .bgm-ad-card__copy small,
.bgm-ad-card--mobile-banner .bgm-ad-card__copy em {
	font-size: .52rem;
}

.bgm-ad-slot--size-320x50 .bgm-ad-card__copy small {
	display: none;
}

.bgm-ad-slot--size-320x50 .bgm-ad-card__copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: center;
	align-items: center;
}

.bgm-ad-slot--size-320x50 .bgm-ad-card__copy strong {
	font-size: .78rem;
}

.bgm-ad-network {
	display: grid;
	overflow: hidden;
	border: 1px solid var(--bgm-ad-rule);
	border-radius: 10px;
	background: var(--bgm-ad-paper);
	place-items: center;
}

@media (max-width: 767px) {
	.bgm-ad-slot {
		padding-block: 1.75rem;
	}

	.bgm-ad-slot--desktop {
		display: none;
	}
}

@media (min-width: 768px) {
	.bgm-ad-slot--mobile {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	a.bgm-ad-card,
	.bgm-ad-card__media img {
		transition: none;
	}
}
