.promo-banner {
	--promo-accent: #30d5fd;
	--promo-price-background: #1fa1cd;
	--promo-muted: #d6d6d6;
	--promo-dim: #b0b0b0;

	container-type: inline-size;
	display: grid;
	grid-template-columns: 3fr 4fr;
	gap: 2em;
	margin-top: 5em;
	padding-inline: max(var(--page-padding), calc((100vw - var(--page-width)) / 2 + var(--page-padding))) var(--page-padding);
	padding-block: 1.5em 0;
	background-color: #101112;
}

	.promo-content {
		min-width: 16em;
		padding-bottom: 2em;
	}

	.promo-title {
		letter-spacing: -0.01em;
	}
		.promo-title span {
			display: block;
		}

	.promo-subtitle {
		font-size: 2em;
		line-height: 1.2;
		color: var(--promo-muted);
	}

	.promo-deal {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 2em;
		margin-top: 1em;
	}

	.promo-prices {
		display: flex;
		flex-direction: column;
	}

	.promo-discount {
		font-weight: 600;
		font-size: 8em;
		line-height: 0.82;
		letter-spacing: -0.02em;
		color: var(--promo-accent);
	}

	.promo-price-row {
		display: flex;
		align-items: center;
		gap: 2em;
		margin-top: 1em;
	}

	.promo-price-new {
		font-weight: 600;
		font-size: 3em;
		line-height: 1;
		color: white;
		background-color: var(--promo-price-background);
		padding: 0.2em 0.5em;
	}

	.promo-price-old {
		display: flex;
		flex-direction: column;
	}

	.promo-price-old-label {
		font-size: 1em;
		line-height: 1;
		color: var(--promo-dim);
	}

	.promo-price-old-value {
		font-weight: 600;
		font-size: 1.5em;
		line-height: 1.1;
		color: var(--promo-muted);
		position: relative;
	}
		.promo-price-old-value::after {
			content: "";
			position: absolute;
			top: 0.5em;
			left: -8%;
			width: 115%;
			height: 3px;
			rotate: 7deg;
			background-color: red;
			filter: drop-shadow(0 1px 1px var(--color-dark));
			opacity: 0.85;
		}

	.promo-person {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 1em;
		max-width: 10em;
	}

	.promo-person-icon {
		width: 8em;
		transform: scaleX(0.9);
		transform-origin: left;
	}

	.promo-person-size {
		margin-top: 0.4em;
		font-weight: 600;
		font-size: 1.5em;
		line-height: 1;
		color: #e6e6e6;
	}

	.promo-person-text {
		margin-top: 0.5em;
		font-size: 1em;
		line-height: 1.25;
		color: var(--promo-dim);
	}

	.promo-flags {
		display: flex;
		align-items: end;
	}
		.promo-flags img {
			width: 100%;
			height: auto;
		}

@media (width <= 1450px) {
	.promo-person {
		display: none;
	}
}

@media (width < 800px) {
	.promo-banner {
		grid-template-columns: 1fr;
		width: 100%;
		padding-inline: var(--page-padding);
	}
	.promo-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
		padding-bottom: 0;
	}
		.promo-title {
			font-size: 1em;
			line-height: 1.2;
			grid-row: 1;
			grid-column: 1;
		}
		.promo-subtitle {
			font-size: 1em;
			grid-column: 1;
			grid-row: 1;
			margin-top: 3em;
		}
		.promo-deal {
			grid-column: 2;
			grid-row: 1;
			margin-top: 0;
		}
			.promo-discount {
				display: none;
			}
			.promo-price-row {
				flex-direction: column;
				gap: 0em;
				align-items: baseline;
				margin-top: 0;
			}
				.promo-price-new {
					padding: 0;
					background: none;
					font-size: 3.5em;
				}
				.promo-price-old-label {
					display: none;
				}
}