Размещение изображения, залезающего под шапку ⇐ CSS

[Anonymous]

Мне нужно проверить этот раздел, который содержит товар и его изображение. Изображение с классом «main-product-image» должно располагаться слева в разделе, а справа должен быть блок с ценой и информацией. Изображение также должно находиться под заголовком. Раздел должен содержать изображение, которое находится под заголовком (оно должно быть полупрозрачным). Мне нужно как-то расположить изображение больших черных наушников так, чтобы они не выходили из общего потока документа, чтобы блок информации справа от наушников точно нет, а изображение прижимается к верху через шапку (как на картинке)
Как должно быть:


Я пытался сопоставить его с абсолютным позиционированием, но видимо моих знаний недостаточно.

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

:root {
--dark-bg-color: #2B2835;
--dark-header-opacity-color: #191720;
--light-color: #ffffff;
--yellow-color: #FFC700;
--light-bg-color: #FBFCFF;
--product-pink-color: #DD5656;
--black-color: #000000;
--price-color: #9D8220;
--base-font-color: "Montserrat";
}

body {
background-color: var(--dark-bg-color);
font-family: var(--base-font-color);
position: relative;
}

a {
color: inherit;
text-decoration: none;
}

.header {
background-color: rgba(25, 23, 32, 0.5);
color: var(--light-color);
}

.header-container {
padding-inline: 4.948vw;
padding-block: 14px;

}

.header-navbar {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 47px;
}

.header-logo {}

.header-nav-list {
display: flex;
column-gap: 5.729vw;
}

.header-nav-list-item {
text-transform: uppercase;
letter-spacing: 1px;
padding: 4px;
position: relative;
display: flex;
justify-content: center;
}

.header-nav-list-item::after {
content: "";
display: block;
height: 2px;
width: 0%;
position: absolute;
background-color: var(--light-color);
bottom: 0;
transition: width 0.2s;
}

.header-nav-list-item:hover::after,
.header-nav-list-item:focus::after {
width: 100%;
transition: width 0.2s;
}

.header-nav-actions-list {
display: flex;
column-gap: 47px;
}

.main-product-image {
position: absolute;
top: 0;
left: -15%;
z-index: -100;
}

.main-black-info {
display: inline-flex;
justify-content: flex-end;

}

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

Подробнее здесь: [url]https://stackoverflow.com/questions/79343659/placement-of-the-image-climbing-under-the-header[/url]