<figure>
<div class="big">
	<div class="small circle"></div>
	<div class="small square"></div>
	<p>She sells sea shells by the seashore.</p>
</div>
<div class="big">
	<div class="small circle"></div>
	<div class="small square"></div>
	<p>She sells sea shells by the seashore</p>
</div>
<div class="big">
	<div class="small circle"></div>
	<div class="small square"></div>
	<p>She sells sea shells by the seashore</p>
</div>
</figure>

.small {
	width: 20px; 
	aspect-ratio: 1;
	position: absolute;
	box-shadow: inset 0 0 15px rgb(243 175 228), 0 0 3px #eee;
	&.square {
		offset: content-box;
		border-radius: 4px;
	}
	&.circle { border-radius: 50%; }
} 
.big {
	flex: 0 0 120px;
	height: 120px; 
	background-image: linear-gradient(-135deg, rgb(240 247 250) 30%, rgb(170 232 251));
	box-shadow: 0 0 3px #eee;
	contain: layout;
	&:nth-of-type(1) {
		.circle { offset: content-box 25%; }
	}
	&:nth-of-type(2) {
		border: 20px solid rgb(170 232 251);
		.circle { offset: border-box 25%; }
	}
	&:nth-of-type(3) {
		padding: 20px;
		.circle { offset: padding-box 25%; }
	}
}
p {
	margin: 0;
	font-size: .6rem;
	color: darkmagenta;
	line-height: .7rem;
}
figure {
	display: flex;
	column-gap: 15px;
	justify-content: center;
}
body {
	/* for demo purpose */
	height: 100vh;
	margin: 0;
	display: grid;
	place-content: center;
	place-items: center;
	font: 14px 'poppins';
	user-select: none; -webkit-user-select:  none;
	cursor: default;
}
@media (orientation:portrait){
	figure {
		flex-direction: column;
		row-gap: 25px;
	}
	body {
		height: max(100vh, 600px);
	}
}