.n24-ai-image-label {
	align-self: flex-start;
	background: var(--n24-ai-label-background-color, #ffffff);
	border: 1px solid var(--n24-ai-label-border-color, #d8dee3);
	border-radius: 0.25rem;
	box-sizing: border-box;
	color: var(--n24-ai-label-text-color, #344454);
	display: none;
	font-family: inherit;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	margin: 0.5rem 0.75rem 0.75rem;
	max-width: calc(100% - 1.5rem);
	padding: 0.2rem 0.45rem;
	text-align: left;
	overflow-wrap: anywhere;
}

@media (min-width: 1025px) {
	.n24-ai-image-label.n24-ai-show-desktop {
		display: inline-block;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.n24-ai-image-label.n24-ai-show-tablet {
		display: inline-block;
	}
}

@media (max-width: 767px) {
	.n24-ai-image-label.n24-ai-show-mobile {
		display: inline-block;
	}
}

.n24-ai-image-stage {
	container-type: inline-size;
	display: grid;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.n24-ai-image-stage > img,
.n24-ai-image-stage > picture,
.n24-ai-image-stage > a,
.n24-ai-image-stage > .n24-ai-image-label--overlay,
.n24-ai-image-stage > .n24-ai-image-label--background {
	grid-area: 1 / 1;
}

.n24-ai-image-overlay-host {
	container-type: inline-size;
	display: grid;
	min-width: 0;
	position: relative;
}

.n24-ai-image-overlay-host > img,
.n24-ai-image-overlay-host > picture,
.n24-ai-image-overlay-host > a,
.n24-ai-image-overlay-host > .n24-ai-image-label--overlay {
	grid-area: 1 / 1;
}

.n24-ai-image-overlay-host > figcaption {
	grid-column: 1;
	grid-row: 2;
}

.n24-ai-image-label--overlay {
	--n24-ai-label-inset: clamp(0.3rem, 2cqw, 0.75rem);
	align-self: end;
	grid-area: 1 / 1;
	justify-self: start;
	margin: var(--n24-ai-label-inset);
	max-width: calc(100% - var(--n24-ai-label-inset) - var(--n24-ai-label-inset));
	pointer-events: none;
	z-index: 20;
}

.n24-ai-image-runtime-host {
	position: relative;
}

.n24-ai-image-label--positioned {
	left: var(--n24-ai-runtime-left, 0);
	margin: 0;
	max-width: var(--n24-ai-runtime-max-width, calc(100% - 0.5rem));
	position: absolute;
	top: var(--n24-ai-runtime-top, 0);
}

.n24-ai-image-stage > .n24-ai-image-label--background {
	align-self: end;
	justify-self: start;
	margin: 0.75rem;
	z-index: 2;
}

.n24-ai-image-label--hero {
	bottom: 1rem;
	left: 1rem;
	margin: 0;
	position: absolute;
	z-index: 20;
}

.n24-ai-image-host {
	position: relative;
}

@container (max-width: 220px) {
	.n24-ai-image-label--overlay {
		--n24-ai-label-inset: 0.25rem;
		line-height: 1.25;
		padding: 0.15rem 0.3rem;
	}
}