.promo-banner {
	display: flex;
	flex-flow: column;
	height: 161px;
	padding: 20px;
	border-radius: 28px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right center;
	background-color: $color-surface;
	box-sizing: border-box;

	@include desktop {
		height: 220px;
		padding: 26px 33px;
		border-radius: 32px;
	}
}

.promo-banner--1,
.promo-banner--2,
.promo-banner--3,
.promo-banner--4 {
	color: $color-white;
	background-image: url('/images/embedded/components-promo-banner-inline-1.png');

	@include desktop {
		background-image: url('/images/embedded/components-promo-banner-inline-2.png');
	}

	@include retina {
		background-image: url('/images/embedded/components-promo-banner-inline-3.png');

		@include desktop {
			background-image: url('/images/embedded/components-promo-banner-inline-4.png');
		}
	}

	.promo-banner__title {
		max-width: 198px;

		@include desktop {
			max-width: 304px;
		}
	}

	.promo-banner__label {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 6px;
		font-size: 14px;
		font-weight: 500;
		line-height: 16px;
		margin-top: auto;

		@include desktop {
			font-size: 16px;
			line-height: 18px;
		}

		svg {
			width: 24px;
			height: 24px;
		}
	}
}

.promo-banner--2 {
	background-image: url('/images/embedded/components-promo-banner-inline-5.png');

	@include desktop {
		background-image: url('/images/embedded/components-promo-banner-inline-6.png');
	}

	@include retina {
		background-image: url('/images/embedded/components-promo-banner-inline-7.png');

		@include desktop {
			background-image: url('/images/embedded/components-promo-banner-inline-8.png');
		}
	}

	.promo-banner__label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 99.7px;
		height: 40.22px;
		border-radius: 14346.4px;
		background: #f57c00;
		color: $color-white;
		font-weight: 500;
		font-size: 20.087px;
		line-height: 23px;
	}
}

.promo-banner--3 {
	color: $color-black;
	background-image: url('/images/embedded/components-promo-banner-inline-9.png');

	@include desktop {
		background-image: url('/images/embedded/components-promo-banner-inline-10.png');
	}

	@include retina {
		background-image: url('/images/embedded/components-promo-banner-inline-11.png');

		@include desktop {
			background-image: url('/images/embedded/components-promo-banner-inline-12.png');
		}
	}

	.promo-banner__label {
		color: $color-green;
	}
}

.promo-banner--4 {
	color: $color-black;
	background-image: url('/images/embedded/components-promo-banner-inline-13.png');

	@include desktop {
		background-image: url('/images/embedded/components-promo-banner-inline-14.png');
	}

	@include retina {
		background-image: url('/images/embedded/components-promo-banner-inline-15.png');

		@include desktop {
			background-image: url('/images/embedded/components-promo-banner-inline-16.png');
		}
	}

	.promo-banner__label {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 99.7px;
		height: 40.22px;
		border-radius: 14346.4px;
		background: $color-black;
		color: $color-white;
		font-weight: 500;
		font-size: 20.087px;
		line-height: 23px;
	}
}

.promo-banner__title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.03em;

	@include desktop {
		font-size: 28px;
	}
}