Несколько фигур CSS Overlay в Bootstrap ⇐ CSS

[Anonymous]

Я пытаюсь создать CSS для своей целевой страницы, как показано в дизайне Figma. Страница построена в начальной загрузке 5 (не уверен, имеет ли это значение). Я знаю, что это возможно, но мне трудно определить, как мне это сделать?
Мой первоначальный план состоял в том, чтобы создать 3 элемента div .Oval1 .Oval2 .Oval3, а затем позиционировать их. их относительно и обрезать, используя скрытое переполнение. Но когда я регулирую размер овалов, все содержимое столбца увеличивается.
Я знаю, что это можно сделать, чтобы выглядеть очень близко к дизайну, но я просто не уверен, что это лучший способ подойти к этому. Заранее большое спасибо за вашу помощь.
Пожалуйста, посмотрите снимки экрана.

We are more than just a company

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



.col-lg-6.d-flex.align-items-center.login_screen_img {
background-image: url(../img/login-pg-bg.png);
background-position: 45% 36%;
overflow: hidden;
}

/*shape overlays*/

.oval1 {
position: relative;
width: 319px;
height: 187px;
background: #4AC676;
opacity: 85%;
border-radius: 50%;
bottom: -330px;
left: -154px;
}

.oval2 {
position: relative;
width: 319px;
height: 187px;
background: #4AC676;
opacity: 85%;
border-radius: 50%;
bottom: -120px;
left: -100px;
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... -bootstrap