Можно ли сделать любой раздел адаптивным без использования медиафайлов? ⇐ CSS

[Anonymous]

Я создал на странице раздел баннеров/героев. Здесь я использую три div для создания ярких углов. Еще один div, который я использовал для фотографии и контента. Дело в том, что я не хочу использовать медиа-запросы для каждого пикселя или диапазона пикселей, а также не хочу использовать изображение вместо этого дизайна. Возможно ли, что когда я превращу страницу в элемент проверки и проверю отзывчивость, все элементы, находящиеся внутри класса banner, смогут быть отзывчивыми?
Коды следующие:

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

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.mantri_main_container{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mantri_main_container .banner{
border: 2px solid red;
width: 100%;
height: 45vh;
background: linear-gradient(45deg, #EAEAEA 0%, #8B8B8B 100%);
position: relative;
}
.mantri_main_container .banner .saffron,
.mantri_main_container .banner .white,
.mantri_main_container .banner .green{
position: absolute;
height: 100%;
width: 100%;
}
.mantri_main_container .banner .saffron::before{
content: "";
clip-path: polygon(11% 0%, 0 0, 0 100%);
height: 100%;
width: 100%;
position: absolute;
background-color: #FF671F;
}
.mantri_main_container .banner .saffron::after{
content: "";
clip-path: polygon(100% 0, 89% 0, 100% 100%);
height: 100%;
width: 100%;
position: absolute;
background-color: #FF671F;
transform: rotateX(180deg);
}
.mantri_main_container .banner .white::before{
content: "";
clip-path: polygon(13% 0, 17% 0, 6% 100%, 2% 100%);
height: 100%;
width: 100%;
position: absolute;
background-color: #ffffff;
}
.mantri_main_container .banner .white::after {
content: "";
clip-path: polygon(98% 0, 94% 0, 83% 100%, 87% 100%);
height: 100%;
width: 100%;
position: absolute;
background-color: #ffffff;
}
.mantri_main_container .banner .green::before {
content: "";
clip-path: polygon(19% 0, 21% 0, 10% 100%, 8% 100%);
height: 100%;
width: 100%;
position: absolute;
background-color: #046A38;
}
.mantri_main_container .banner .green::after {
content: "";
clip-path: polygon(92% 0, 90% 0, 79% 100%, 81% 100%);
height: 100%;
width: 100%;
position: absolute;
background-color: #046A38;
}
.mantri_main_container .banner .image_main_container {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mantri_main_container .banner .image_main_container .image_container{
width: 57%;
height: 100%;
display: flex;
align-items: flex-end;
justify-content: space-between;
position: absolute;
}
.mantri_main_container .banner .image_main_container .image_container .image_details{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 65%;
height: 100%;
}
.mantri_main_container .banner .image_main_container .image_container .image_details h1{
font-family: 'DM Sans';
font-size: 60px;
font-size: clamp(9px, 3vw, 4rem);
text-align: center;
text-shadow: 3px 3px 5px #9d9cb5, 3px 3px 5px #7371b1;
color: #06038D;
}
.mantri_main_container .banner .image_main_container .image_container .image_details h3{
font-family: 'DM Sans';
font-size: 28px;
font-size: clamp(7px, 2vw, 1.5rem);
text-align: center;
}
.mantri_main_container .banner .image_main_container .image_container .image_details img{
width: 7vw;
object-fit: contain;
}
.mantri_main_container .banner .image_main_container .image_container .image{
width: 26%;
height: auto;
display: flex;
align-items: flex-end;
justify-content: center;
width: auto;
height: 36vh;
position: absolute;
bottom: 0;
right: 0;
}
.mantri_main_container .banner .image_main_container .image_container .image img{
width: 100%;
height: 85%;
object-fit: contain;
height: 100%;
position:  relative;
}

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

Shri Lorem Ipsum Ji
Lorem ipsum dolor sit amet consectur
[img]underline.png[/img]

[img]https://unsplash.com/photos/a-man-wearing-a-green-coat-and-sunglasses-HTx0r7lJvbk[/img]

Ниже приведены снимки экрана различных экранов в соответствии с желаемым результатом: < /p>
на экране 240 пикселей —


на экране 320 пикселей –


на экране 768 пикселей –


на экране 1024 пикселей -

на 1440 пикселей экран-


на экране 2560 пикселей-


на экране 9999 пикселей-



Подробнее здесь: https://stackoverflow.com/questions/790 ... edia-files