/* Campaign artwork: 1920 x 500, with the text panel ending at x = 822. */
@media screen and (max-width: 1024px) {
	#post-13498 > .article-page-header.addiko-hero-image {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		height: auto;
		padding: 0;
		background-color: #002d4c;
		background-size: 0 0;
	}

	/* Inherit the selected campaign image instead of hardcoding its URL. */
	#post-13498 > .article-page-header.addiko-hero-image::before {
		content: "";
		display: block;
		flex: none;
		order: 0;
		width: 100%;
		aspect-ratio: 1920 / 500;
		background-image: inherit;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}

	#post-13498 > .article-page-header .blue-box-wrapper {
		position: static;
		order: 2;
		width: 100%;
		min-width: 0;
		border-radius: 0;
	}

	#post-13498 > .article-page-header .blue-box-wrapper .red-box {
		display: none;
	}

	#post-13498 > .article-page-header .blue-box {
		width: 100%;
		min-width: 0;
		padding: 20px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: transparent;
	}

	#post-13498 > .article-page-header .blue-box-text {
		max-width: none;
	}

	#post-13498 > .article-page-header .blue-box-text p {
		width: 100%;
		margin: 0;
		text-align: center;
	}

	#post-13498 > .article-page-header .addiko-hero-button {
		min-width: 160px;
		min-height: 48px;
		margin: 0;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 600px) {
	/* Stack both complete artwork panels so the text and logos stay legible. */
	#post-13498 > .article-page-header.addiko-hero-image::before {
		aspect-ratio: 822 / 500;
		background-position: left center;
		background-size: auto 100%;
	}

	#post-13498 > .article-page-header.addiko-hero-image::after {
		content: "";
		display: block;
		flex: none;
		order: 1;
		width: 100%;
		aspect-ratio: 1098 / 500;
		background-image: inherit;
		background-repeat: no-repeat;
		background-position: right center;
		background-size: auto 100%;
	}
}