Сверстать элемент страницы

Здравствуйте. Мне нужно сверстать элемент представленный выше. В фотошопе видно, что font-size кавычек равен 337px. Проблема в том, что тогда создается огромный отступ вниз и небольшой уже вверх, из-за чего сама надпись "Dhavan" поднимается высоко. Пытался заключить в ограничивающий контейнер эти кавычки. Примерный код:

 .quote-jail {
	position: relative;
	height: 150px;
	width: 150px;
	overflow: hidden;
}
.quote {
	font-size: 337px;
	position: absolute;
	top: -35px;
	left: -25px;

}
 .name {
	text-transform: uppercase;
	font-size: 26px;
	position: absolute;
	top: 10px;
}

<div class="quote-jail">
	<span class="name">dhavan</span>
	<span class="quote"> &#8221;</span>
</div>

Затем круглое изображение и этот quote-jail поместил в блок, которому задал flex-direction: row. Но мне кажется, такой подход неверный. Очень настораживают отрицательные top/left. Все ли я правильно сделал и есть ли другой, альтернативный способ наверстать это?