Абсолютно позиционированный элемент CSS выходит за границы раздела ⇐ CSS

[Anonymous]

Я работаю над специальным разделом на своем веб-сайте, в котором мне нужно разместить элемент синего фона внутри раздела. Однако я столкнулся с проблемой, когда компонент синего фона выходит за пределы раздела и влияет на макет последующих разделов.
Вот соответствующая часть моего HTML и CSS:

Код: Выделить всё

body {
margin: 0;
}

.custom-section {
background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
position: relative;
width: 100%;
height: 650px;
overflow: hidden; /* Prevent overflow */
}

.custom-section .container-wrapper {
position: relative;
width: 1510px;
height: 430px;
border: 2px dashed red;
left: 75px;
top: 110px;
overflow: hidden;
max-width: 1440px;
}

.custom-section .text-section {
width: 520px;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px dashed blue;
}

.custom-section .title-container h2 {
font-family: 'ITC Garamond Std';
font-size: 64px;
font-weight: 300;
line-height: 70px;
letter-spacing: -2px;
text-align: left;
margin: 0;
padding: 0;
}

.custom-section .text-container {
font-family: 'iCiel Internacional', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 26px;
text-align: left;
width: 60%;
margin-bottom: 0;
padding-bottom: 0;
}

.custom-section .spacer {
flex: 1;
border: 2px dashed green;
}

.custom-section .images-wrapper {
width: 960px;
height: 430px;
position: absolute;
left: 550px;
display: flex;
gap: 30px;
border: 2px dashed purple;
overflow: hidden;
}

.custom-section .images-wrapper img {
width: 300px;
height: 430px;
}

.circular span {
font: 14px Inter;
height: 80px;
position: absolute;
left: 75px;
transform-origin: bottom center;
line-height: 16.94px;
}

.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
left: -10px;
}

@keyframes rotateText {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
animation: rotateText 10s linear infinite;
}

.blue-background {
width: 1311px;
height: 590px;
left: 300px;
background-color: blue;
position: relative;
opacity: 0.15;
transform: rotate(30deg);
}






{{ section.settings.heading }}

{{ section.settings.content }}


{{ section.settings.circular_content }}



[img]{{ [/img]
[img]{{ [/img]
[img]{{ [/img]

Я хочу, чтобы синий фон находился внутри раздела, но в настоящее время он переполняется и влияет на макет следующего раздела. Как мне настроить CSS, чтобы синий фон оставался в пределах пользовательского раздела?
Вот как это выглядит сейчас:


Вот как это должно выглядеть:


А это реквизит, который указан в файле Figma:

Код: Выделить всё

width: 1311px;
height: 590px;
top: 1291px;
left: 1585px;
gap: 0px;
opacity: 0.15px;
angle: 180 deg;

Эти реквизиты относятся к контейнеру, который отмечен на втором изображении.

Подробнее здесь: https://stackoverflow.com/questions/786 ... boundaries