<main>
<img src=Sancy_%28diamond%29_black.png >
<details>
	<summary>Click to know more!</summary>
	<ul>
		<li>The diamond is now known as the Sancy
		<li>It comprises two back-to-back crowns
		<li>It's likely of Indian origin
	</ul>
</details>
</main>

img {
	height: 200px;
	float: left;
	shape-outside: url("Sancy_%28diamond%29_black.png");
	shape-margin: 20px;
}

summary {
	background: red;
	color: white;
	cursor: pointer;
	font-weight: bold;
	width: 80%; 
	height: 30px; line-height: 30px;
}

summary:focus { outline: none; }
summary::-webkit-details-marker, summary::marker { display: none; }

details { font-family: 'eb garamond'; }

ul { list-style: none; margin: 0; }

li { margin: 30px 10px; }

main {
	width: 400px;
	margin: auto;
	margin-top: calc(50vh - 100px);
	border-bottom: 20px solid red;
}

body {
	user-select: none;
	-webkit-user-select:  none;
	-moz-user-select:  none;
}