Необходимо сверстать контейнер для рекламного баннера силами html и css (без js)

Пример реализации:


Фактически нужно создать адаптивный контейнер и добавить рубрикатор с текстом наверху (по центру).

Сейчас код баннера выглядит так и работает не корректно, рубрикатор не привязан к контейнеру:

<div style="text-align:center; margin-bottom:10px"><a href="ссылка на сайт"><img class="image-light" src="ссылка на картинку" alt="свой текст" ></a><div style="font-size:10px; position:absolute;top:18px;left:75px;padding:2px 5px;background:#FF5722;color:#fff;border-radius:5px">Текст по центру</div></div>

Баннер используется и в мобильной версии, и в десктопной версии (соответственно размеры картинок отличаются).
В результате хотелось бы получить адаптивный код баннера со стилями.

Подробности исполнителю.