Как сверстать эти декоративные элементы правильно??

Вот эти штучки по бокам. Пытался уже и через псевдоэлементы и через обычные. Дело еще в том что они должны быть привязаны именно к табличке, тоесть с уменьшением ширины экрана меняться только когда табличка перестает помещаться.

Нашаманил как мог и вроде работает, но вот вопрос как это делать легко и не танцевать с бубном??

Вот код html:

1234567891011121314151617181920

         <section id="inspiration-banner-section"> 
            <div class="inspiration-banner wide-wrap"> 
                <img src="https://imgs/quotes.png" width="-1" height="-1" alt = "false|false"/> 
 
                <h3 class="inspiration-banner__text">One of the best daily podcasts that 
                    covers every topic on Spotify.</h3> 
 
                <div class="inspiration-banner-person"> 
                    <img src="https://imgs/insp-banner__img.png" width="-1" height="-1" alt = "true|false"/> 
                    <p>John Smith,</p> 
                    <img src="https://imgs/insp-icon.png" width="-1" height="-1" alt = "false|false"/> 
                    <p style="font-weight: 700;">Social Community Manager</p> 
 
                    <img src="https://imgs/decor4.png" width="-1" height="-1" alt = "false|false"/> 
                    <img src="https://imgs/decor5.png" width="-1" height="-1" alt = "false|false"/> 
                </div> 
            </div> 
 
            <img src="https://imgs/decor6.svg" width="-1" height="-1" alt = "false|false"/> 
        </section>

css:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

 /* inspiration */ 
 
.inspiration-wrap{ 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    padding-top: 140px; 
} 
 
.inspiration__title{ 
    max-width: 800px; 
    font-size: 60px; 
} 
 
.inspiration-list{ 
    display: flex; 
    padding-top: 100px; 
    gap: clamp(5px, 20vw, 28%); 
    justify-content: center; 
} 
 
.inspiration-list p{ 
    max-width: 600px; 
    padding-top: 40px; 
    font-weight: 500; 
} 
 
.inspiration-banner{ 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background-color: #f7ede8; 
    margin-top: 120px; 
    text-align: center; 
} 
 
.inspiration__quotes{ 
    padding-top: 40px; 
    padding-bottom: 50px 
} 
 
.inspiration-banner__text{ 
    font-size: 36.65px; 
    max-width: 700px; 
} 
 
.inspiration-banner-person{ 
    max-width: 434px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 40px 0; 
} 
 
.inspiration-banner-decor__1{ 
    position: absolute; 
    transform: translate(-360%, -35%); 
} 
 
.inspiration-banner-decor__2{ 
    position: absolute; 
    transform: translate(500%, -160%); 
} 
 
.inspiration-banner__decor{ 
    position: absolute; 
    width: 150px; 
    height: 150px; 
    left: 50%; 
    transform: translate(-50%, 45%) 
} 
/* inspiration */

По дате

По рейтингу

rez_kaz

Новичок

1г

На самом деле же не имеет знааение в каком родителе находятся эти элементы...
Можно было бы их поместить в один контейнер и расположить их в нём а уже контейнер в родителе по верх всего содержимого или же ниже ...
Я могу показать как делать это без всяких там танцев...
Мне кажется это проще...

semen_kapacuk

Гуру

1г

position: relative для inspiration-banner-person и размести эти картинки не процентами и не через translate. И тогда они будут по краям блока даже при изменении его размеров

user_4688100

Искусственный Интеллект

1г

А нарисовать их и тупо вставить картинкой, не?