Допрацювати верстку на HTML CSS JS

Вітаю!

Вхідні дані:

- макет (клікніть на цей текст)

- частина готової верстки (прикріпив у файлах fortune.zip), скріншот як зараз (https://prnt.sc/bnKgtjh9dD9P)

Основні задачі:

Так як частина верстки вже готова, потрібно допрацювати її згідно з макетом і наступними вимогами, а саме:

1) Розмістити картинку і текст до дузі як на макеті (картинку і текст показав стрілками - https://prnt.sc/dUjxfcm7iH20)

2) Так як текст і картинка (картинка може бути відсутня) може мінятись, потрібно врахувати його довжину і зробити адаптивним, а саме:

2.1) Щоб картинка і напис були вертикально відцентровані відносно сектора

2.2) Щоб картинка і напис були горизонтально відцентровані відносно сектора

2.3) Щоб картинка і напис не вилазили за рамки сектора - тут можна зробити по аналогії як зараз що ставиться три крапки (https://prnt.sc/v2PSD19e2U_7), або якщо не вийде з три крапки... то просто обрізати, але не переносити текст на 2 рядки, він має бути в 1 рядок

3) Верхній сектор має бути розташований горизонтально

- зараз так - https://prnt.sc/yj--9z32cswB

- має бути так - https://prnt.sc/ZDYYj5M4WNB5

- врахувати це для різної кількості секторів, їх може бути 2, 3, 4, 5...ітд

Додаткові задачі:

- не обов'язкові, але готовий доплатити за них

1) Винести цей текст не картинкою, а щоб був div в index.html і можна було міняти текст

- https://prnt.sc/_3tTDeJTD6S6

2) Адаптувати всі тексти і картинки в колесі, щоб вони не обрізались, а зменшували шрифт/розмір. Тобто пункт 2.3) втрачає сенс. Ну і якщо виконаєте 1) з додаткових задач то щоб він також адаптувався

PS.

1) Те, що при кліку бутилочка крутиться і вказує неправильно - це не потрібно виправляти

2) Якщо виконаєте раніше, а не в останній день дедлайну готовий трішки доплатити