.article-preview { 
	--article-preview__button-size: 46px;
	--article-preview__max-width: 1024px;
	--article-preview__offset-y: 12px;
	--article-preview__triangle-offset: 20px;
	--article-preview__landscape-max-width: 350px;
	--article-preview__landscape-max-height: 900px;
	--article-preview__landscape-max-image-height: 350px;
	--article-preview__portrait-max-width: 750px;
	--article-preview__portrait-max-height: 450px;
	--article-preview__portrait-min-image-width: 300px;
	--article-preview__portrait-max-text-width: calc(var(--article-preview__portrait-max-width) - var(--article-preview__portrait-min-image-width));
	--article-preview__clip-path: polygon(
		0 100%, 
		100% 100%, 
		100% var(--article-preview__offset-y),
		calc(var(--article-preview__triangle-offset) * 2) var(--article-preview__offset-y), 
		calc(var(--article-preview__triangle-offset) * 1.5) 0, 
		var(--article-preview__triangle-offset) var(--article-preview__offset-y), 
		0 var(--article-preview__offset-y)
	);
	display: none;
	box-shadow: 0 0 5px 0;
	max-width: var(--article-preview__max-width);
	position: absolute;
	width: auto;
	z-index: 200;
}

.article-preview.show { 
	display: inline-flex;
	justify-content: center;
}

.article-preview > .article-preview__body { 
	overflow: hidden;
	position: relative;
	clip-path: var(--article-preview__clip-path);
}

.article-preview[data-orientation=portrait] > .article-preview__body { 
	max-width: var(--article-preview__portrait-max-width);
	max-height: var(--article-preview__portrait-max-height);
}

.article-preview:not([data-orientation=portrait]) > .article-preview__body { 
	max-width: var(--article-preview__landscape-max-width);
	max-height: var(--article-preview__landscape-max-height);
}

.article-preview > .article-preview__body > .article-preview__actions { 
	border-radius: 100%;
	background-color: var(--theme-page-background-color);
	box-shadow: 0 0 5px 0;
	right: 20px;
	bottom: 20px;
	position: absolute;
	width: var(--article-preview__button-size);
	height: var(--article-preview__button-size);
}

.article-preview > .article-preview__body > .article-preview__content { 
	display: inline-flex;
	align-self: baseline;
	justify-content: center;
	max-width: inherit;
}

.article-preview[data-orientation=portrait] > .article-preview__body > .article-preview__content { 
	align-items: stretch;
	flex-direction: row;
}

.article-preview[data-orientation=portrait] > .article-preview__body > .article-preview__content > .article-preview__image-container { 
	height: auto;
	min-width: var(--article-preview__portrait-min-image-width);
	max-height: var(--article-preview__portrait-max-height);
}

.article-preview:not([data-orientation=portrait]) > .article-preview__body > .article-preview__content { 
	flex-direction: column;
	overflow: hidden;
}

.article-preview:not([data-orientation=portrait]) > .article-preview__body > .article-preview__content > .article-preview__image-container { 
	max-height: var(--article-preview__landscape-max-image-height);
}

.article-preview > .article-preview__body > .article-preview__content > .article-preview__image-container > .article-preview__image { 
	height: 100%;
	width: 100%;
}

.article-preview > .article-preview__body > .article-preview__content > .article-preview__text { 
	background-color: var(--theme-page-background-color);
	padding: 15px;
}

.article-preview[data-orientation=portrait] > .article-preview__body > .article-preview__content > .article-preview__text { 
	max-width: var(--article-preview__portrait-max-text-width);
}