:root {
	--article-related-background-color: #F3F3F3;
	--article-text-max-width: 1000px;
	--article-image-max-width: 1440px;
	--article-outer-padding-vertical: 60px;
	--article-outer-padding-horizontal: 20px;
	--article-banner-image-max-height-desktop: 617px;
}

.shopify-section:has(.article) {
	padding: var(--article-outer-padding-vertical) 0 0 0;

	.article {
		max-width: var(--article-image-max-width);
		margin: 0 auto;

		@media (max-width: 1479px) {
			margin: 0 var(--article-outer-padding-horizontal);
		}

		.article-banner {
			text-align: center; /* Centers the inline-flex image container element horizontally */

			.article-banner__image-container {
				display: inline-flex; /* This will allow the container to resize automatically */
				padding: 0;

				picture {
					display: inline-flex;

					.article-banner__image {
						position: relative;
						max-width: 100%;       /* Image scales to container width */
						max-height: var(--article-banner-image-max-height-desktop);
						height: auto;          /* Maintain original aspect ratio */
						object-fit: contain;   /* Ensure the image fits within its constraints */
					}
				}
			}

			.article-banner__heading-block {
				padding: 0;
				margin: 0 auto;
				max-width: var(--article-text-max-width);

				.article-banner__heading {
					padding-top: 60px;
					text-align: left;
					width: 100%;
				}
			}
		}

		.article-main {
			padding: 0;
			max-width: var(--article-text-max-width);

			.article-main__rte {
				padding: 0 0 var(--article-outer-padding-vertical) 0;
				border: none;
			}
		}
	}

	.article-related {
		background-color: var(--article-related-background-color);
		margin: 0;
		padding: 20px 0;

		@media (min-width: 768px) {
			padding: 40px 0;
		}
	}
}