.inline-bubble {
	background: #fff;
	--ib-bg: #fff;
	/*border-radius: var(--radius-lg-fallback);*/
	width: calc(100% - 1.5rem);
	margin-bottom: 0.5rem;
	gap: 1rem;
	padding: 1.5rem;
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
}
.inline-bubble:before{
	content: '';
	border-radius: 100%;
	width: 1.5rem;
	height: 1.5rem;
	flex: 0 0 1.5rem;
	background: var(--ib-bg);
	position: relative;
	top: 0.25rem;
}
.inline-bubble--left {
	margin-right: 1.5rem;
}

.inline-bubble--right {
	margin-left: 1.5rem;
}
.inline-bubble p:first-child{
	margin-bottom: 0;
}
.inline-bubble--flamingo {
	background: var(--color-flamingo-200);
	color: var(--color-flamingo-900);
	--ib-bg: var(--color-flamingo-700);
}

.inline-bubble--yellow {
	background: var(--crisis-subtle);
	color: var(--crisis-text-secondary);
	--ib-bg: var(--crisis-default);
}

.inline-bubble--azure {
	background: var(--color-azure-200);
	color: var(--color-azure-900);
	--ib-bg: var(--color-azure-600);
}

.inline-bubble--green {
	background: var(--color-green-200);
	color: var(--color-green-900);
	--ib-bg: var(--color-green-600);
}
.inline-bubble{
	font-size: var(--body_s);
	line-height: 1.5;
}
.inline-bubble p:first-child{
	font-size: var(--body_m);
	line-height: 1.3;
	margin-bottom: 0.25rem;
}

/* BEGIN: Tablet and desktop */
@media only screen and (min-width: 768px) {
	.inline-bubble{
		padding: 2rem;
	}
	.inline-bubble:before{
		width: 1.5rem;
		height: 1.5rem;
		flex: 0 0 1.5rem;
	}
	.inline-bubble--left {
		margin-right: 2.5rem;
	}

	.inline-bubble--right {
		margin-left: 2.5rem;
	}
	.inline-bubble {
		width: calc(100% - 2.5rem);
	}
}

/* END: Tablet and desktop */