.article		{
	margin-right: auto;
	padding-right: 250px;
	margin-left: auto;
	padding-left: 0px;
	}
	
.marginalnote, .sidesticker 	{
	position: relative;
	left: 250px;
	right: 0;
	width: 220px;
	float: right;
	margin-right: 0;
	margin-left: -250px; }


	:not(td) > :is(ul:not(.tiles),ol) > li > a > img.preview {
		transform: translateX(clamp(120px, calc(50vw - 555px), 480px)) scale(0.3);
	}
	
	:not(td) > :is(ul:not(.tiles),ol) > li:hover > a > img.preview {
		width: clamp(120px, calc(50vw - 555px), 480px);
	}

			

/* narrow */
@media screen and (max-width: 640px)  {
	.article {
		padding-right: 0; }
	.marginalnote {
		float: none;
		margin-right: auto;
		z-index: 2;
		left: 0;
		width: 100% ;
		clear: both;
		margin-left: 0;
		display: block;
		background-color: #eee;
		}
}

/* iPhone */
@media screen and (max-device-width:640px) {
	.article {
		margin-left: Max(0px,env(safe-area-inset-left));
		margin-right: Max(0px,env(safe-area-inset-right)); /*#TODO bug*/
		}
	.marginalnote {
		float: none;
		margin-right: auto;
		z-index: 2;
		left: 0;
		width: 100% ;
		clear: both;
		margin-left: Max(0px,env(safe-area-inset-left));
		display: block;
		background-color: #eee;
 		}
}