Адаптировать верстку html элемента под требования

У меня есть несколько html элементов мне нужно адаптировать верску каждого из них по следующие требовани.
- all classes and id's should have a unique prefix 'joywp-sticker-testimonial'

- do not use bare tags in css like body, li, div etc. Always use them together with wrapper classes or id's.

- do not allow css pseudo-selector in markup that regulates values that should be attribute-regulated.

- colors must not be embedded in URLs (e.g. SVG data URLs or background-image hacks)

- element should be fully adaptive to all screens

- If you place an element in a div container with a width for example 10% or any other width, all element parts should fully stay inside the container.

- avoid using paddings, margins, and background for the main element wrapper.

- take a note that there can be more than one the same element on a page, but each of the elements should work independently.

- try to avoid wrapping text to specific tags like p or h4, etc. Always wrap it in regular div and style it.

- element should have fully valid html, css, js should pass https://validator.w3.org validation

- I don't need comments in the code

- try avoid use postions: absolute and other unpredictable css (unless there no way to stay element workable without them)

- it should be compatible with screen readers

- element should support all browsers in the list below

- avoid using fixed width for elements, they should be flexible inside the container where they

1. Chrome version 49+

2. Safari 12+

3. Firefox 78+

4. Edge: Chromium-based Edge (79+)

- avoid changing too much, it should have minimal changes, but be compatible with the requirements above

В конечном итоге я должен получить элмент который я могу вставить в builder wordpress по типу wpbakery или elementor и он будет нормально отображаться там с любыми настройками колонок и столбцов.

Прикрепляю как файл html первого элемента.

Плачу за каждый элемент по отдельности.