body {
	font-family: system-ui,sans-serif;
	background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(4) rotate(120)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,75.1%,1)'/><path d='M-10-10A10 10 0 00-20 0a10 10 0 0010 10A10 10 0 010 0a10 10 0 00-10-10zM10-10A10 10 0 000 0a10 10 0 0110 10A10 10 0 0120 0a10 10 0 00-10-10zM30-10A10 10 0 0020 0a10 10 0 0110 10A10 10 0 0140 0a10 10 0 00-10-10zM-10 10a10 10 0 00-10 10 10 10 0 0010 10A10 10 0 010 20a10 10 0 00-10-10zM10 10A10 10 0 000 20a10 10 0 0110 10 10 10 0 0110-10 10 10 0 00-10-10zM30 10a10 10 0 00-10 10 10 10 0 0110 10 10 10 0 0110-10 10 10 0 00-10-10z'  stroke-width='3.5' stroke='hsla(218,0%,38.4%,1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-104,-136)' fill='url(%23a)'/></svg>")
}


iframe {
	max-width: 100%;
	aspect-ratio: 16/9;  
}

figure.feature-image {
	max-width: 30%;
	display: inline-block;
    overflow: initial;
}

img.feature {
	max-width: 100%;
	filter: saturate(0%) contrast(150%);

}

img.feature:hover {
	filter: drop-shadow(5px 5px 10px #000);
	transform: scale(1.05); 
}

p {
	position: relative;
	overflow: hidden;
	z-index: 99;
}


p::before {
	content: "" ;
	width: 100%;
	height: 10em;
	display: inline-block;
	background-color: #aaa8;
	position: absolute;
	background-image: url(http://images.webwork.space/768x576/l01.jpg);
	opacity: 80%;
	z-index: -1;
}