.article-details-header {
	height: 487px;
	margin-bottom: var(--px-32);

	.adf-text-wrapper {
		position: absolute;
		left: 0;
		bottom: var(--px-16);
		color: var(--white-color);
		z-index: 2;

		.Title-Post, .Tag-Value {
			color: var(--white-color) !important;
		}
	}

	.adf-image-wrapper {
		position: absolute;
		width: 100dvw;
		height: 100%;
		left: calc((1140px - 100dvw) / 2);
		background-color: var(--black-color);
		z-index: 1;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
			min-height: auto;
			object-fit: cover;
			object-position: center;
			border-radius: 0;
		}
	}
}

/* --- experiment Related Article Widget */

.article-widget-wrapper {
	margin-bottom: var(--px-32);
	position: relative;
	background-color: var(--black-color);

	&::before, &::after {
		content: '';
		height: 100%;
		width: 100%;
		background-color: var(--black-color);
		position: absolute;
		top: 0;

	}

	&::before {
		right: 100%;
	}

	&::after {
		left: 100%;
	}

	.article-widget-container {
		background-color: var(--black-color);

		.article-widget-container-wrapper {
			padding: var(--px-32) 0;

			.article-widget-header {
				margin-bottom: var(--px-24);
				position: relative;
				color: var(--white-color);

				&::after {
					content: '';
					position: absolute;
					bottom: -2px;
					left: 0;
					background-color: var(--blue-color);
					width: var(--px-70);
					height: 1px;
				}
			}

			.article-child-container {
				display: flex;
				flex-direction: column;
			}

			.article-widget-item {
				padding: var(--px-16) 0;
				display: flex;
				gap: var(--px-16);
				border-bottom: 1px solid #3A3A3A;
				color: var(--white-color);

				.article-tag {
					background-color: var(--blue-color);
					padding: 0 var(--px-10);
					font-size: var(--px-12);
					border-radius: var(--px-20);
					color: var(--white-color);
				}

				h4 {
					font-size: var(--px-20);
					text-decoration: underline;
					font-style: italic;
					font-weight: 700;
				}

				.awi-image {
					width: 100px;
					min-width: 100px;
					height: 86px;
					border-radius: var(--border-radius);
					overflow: hidden;

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}

				.awi-container {
					display: flex;
					flex-direction: column;
					gap: var(--px-8);
				}
			}
		}

	}

	&.aww-version-white {
		height: 360px;
		background-color: transparent;
		z-index: 1;

		&::before, &::after {
			content: none;
		}

		.article-widget-container {
			position: absolute;
			max-width: 1100px;
			width: 100dvw;
			background-color: transparent;


			.article-widget-container-wrapper {
				.article-widget-header {
					color: var(--black-color);
				}

				.article-child-container {
					flex-direction: row;
					gap: var(--px-22);
				}

				.article-widget-item {
					padding: 0;
					flex-direction: column;
					gap: 0;
					background-color: #F4F4F4;
					color: initial;
					overflow: hidden;
					border-bottom: none;
					border-radius: var(--border-radius);
					flex: 1;

					.article-tag {
						display: none;
					}

					a {
						padding: var(--px-20) var(--px-26);

						h4 {
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							font-size: var(--px-18);
							text-decoration: none;
							font-style: normal;
							font-weight: 800;
						}
					}

					.awi-image {
						width: 100%;
						min-width: 100%;
						height: 189px;
						border-radius: 0;
						overflow: hidden;
					}

					.awi-container {
						gap: 0;
					}
				}
			}
		}
	}
}


@media (max-width: 1139.98px) {
	.article-details-header {
		.adf-image-wrapper {
			left: -20px;
		}
	}
}

@media (max-width: 575.98px) {
	.order-list {
		li {
			padding-left: 0;
			font-size: var(--px-20);

			&::marker {
				font-size: var(--px-20);
			}
		}

		.order-sub-list {
			margin-left: 0;
		}
	}

	.article-widget-wrapper {
		.article-widget-container {
			.article-widget-container-wrapper {
				.article-widget-item {
					h4 {
						font-size: var(--px-18);
					}

					.article-widget-image {
						width: 78px;
						min-width: 78px;
						height: 86px;
					}
				}
			}
		}

		&.aww-version-white {
			height: auto;
			position: relative;

			.article-widget-container {
				position: relative;
				width: 100%;


				.article-widget-container-wrapper {
					padding: 0;

					.article-widget-item {
						padding: var(--px-12) var(--px-8);
						flex-direction: row;
						gap: var(--px-8);

						a {
							padding: 0;

							h4 {
								-webkit-line-clamp: 3;
								font-size: var(--px-16);
							}
						}

						.awi-image {
							width: 120px;
							min-width: 120px;
							height: 102px;
							border-radius: 8px;
						}
					}
				}
			}
		}
	}
}

:root {
	/* === base === */

	--black-color: #000;
	--white-color: #fff;
	--grey-color: #606060;
	--grey-color-2: #636364;
	--grey-color-3: #F9F9F9;
	--grey-radio-btn-color: #F1F1F1;
	--input-border-color: #6B7280;
	--blue-color: #0074FF;
	--tab-blue-color: rgba(0, 153, 255, .07);
	--tab-border-color: rgba(0, 153, 255, .5);
	--tab-blue-hover-color: rgba(0, 153, 255, .20);
	--grey-bg-color: #D9D9D9;
	--grey-bg-color-2: #E2E8F0;
	--grey-border-color: #D9D9D9;
	--btn-border-radius: 3px;
	--border-radius-2px: 2px;
	--border-radius-4px: 4px;
	--border-radius-5px: 5px;
	--border-radius-8px: 8px;
	--border-radius-12px: 12px;
	--border-radius-24px: 24px;
	--border-radius: 9px;
	--text-black-color: #050B20;
	--text-input-color: #505050;
	--box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.15);

	--filter-blue: brightness(0) saturate(100%) invert(36%) sepia(92%) saturate(5153%) hue-rotate(205deg) brightness(105%) contrast(105%);
	--filter-white: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(209deg) brightness(103%) contrast(101%);
	--filter-red: brightness(0) saturate(100%) invert(15%) sepia(77%) saturate(4581%) hue-rotate(349deg) brightness(87%) contrast(96%);

	/* === colors === */

	--orange-color: #FF8000;
	--gray-color: #777777;
	--silver-color: #AFAFAF;
	--yellow-color: #FFC02B;
	--purple-color: #9000FF;
	--beige-color: #E4D1A5;
	--teal-color: #1CB19B;
	--brown-color: #7A5734;
	--red-color: #B22334;
	--green-color: #068241;
	--bronze-color: #B0753A;
	--pink-color: #FF318A;
	--gold-color: #D6BD83;
	--tan-color: #BEA66D;
	--copper-color: #CC8457;
	--error-color: #D92F20;
	--check-color: #34A853;
	--text-red: #EA4335;

	/* === px === */
	--px-2: 0.125rem;
	--px-4: 0.25rem;
	--px-6: 0.375rem;
	--px-7: 0.438rem;
	--px-8: 0.5rem;
	--px-10: 0.625rem;
	--px-11: 0.688rem;
	--px-12: 0.75rem;
	--px-13: 0.813rem;
	--px-14: 0.875rem;
	--px-15: 0.938rem;
	--px-16: 1rem;
	--px-18: 1.125rem;
	--px-20: 1.25rem;
	--px-22: 1.375rem;
	--px-24: 1.5rem;
	--px-26: 1.625rem;
	--px-28: 1.75rem;
	--px-30: 1.875rem;
	--px-32: 2rem;
	--px-34: 2.125rem;
	--px-36: 2.25rem;
	--px-38: 2.375rem;
	--px-40: 2.5rem;
	--px-42: 2.625rem;
	--px-44: 2.75rem;
	--px-46: 2.875rem;
	--px-48: 3rem;
	--px-50: 3.125rem;
	--px-52: 3.25rem;
	--px-54: 3.375rem;
	--px-56: 3.5rem;
	--px-64: 4rem;
	--px-70: 4.375rem;
	--px-72: 4.5rem;
	--px-76: 4.75rem;
	--px-80: 5rem;
	--px-84: 5.25rem;
}