Перекрытие адаптивных фоновых изображений CSS не работает [закрыто] ⇐ CSS

[Anonymous]

У меня возникли проблемы с пониманием того, как создать этот макет.
У меня есть одна оболочка, содержащая двух дочерних элементов. Одно слева, другое справа.
Правый дочерний элемент содержит два изображения, которые должны перекрывать друг друга и быть отзывчивыми одновременно.
Я пробовал разные решения с позиционированием, CSS-сетками и простым flexbox, но это выглядит не очень хорошо.
Эти два изображения являются фоновыми, и я не знаю, проблема в этом или в чем-то другом, но я не вполне понимаю. Это работает, когда я устанавливаю фиксированную ширину и высоту для изображений, но на самом деле я хочу, чтобы они реагировали и расширялись до максимального размера, который должен быть для первого изображения (ширина: 526 пикселей, высота: 521 пиксель) и второго изображения. (ширина: 308 пикселей, высота: 412 пикселей), но кажется, что это неправильно, и тогда они больше не реагируют.

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

import React, { useState } from "react";
import styled from "@emotion/styled";

const navigationData = [
{
id: "nav-1",
src: "/path1",
label: "Navigation Item 1",
media: [
{
backgroundColor: { key: "--color-background-1" },
backgroundImage: {
src: "https://images.unsplash.com/photo-1503256207526-0d5d80fa2f47?q=80&w=2486&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "First image",
},
},
{
backgroundColor: { key: "--color-background-1" },
backgroundImage: {
src: "https://plus.unsplash.com/premium_photo-1663133679087-bc5deb50ab00?q=80&w=2502&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "First image",
},
},
],
},
{
id: "nav-2",
src: "/path2",
label: "Navigation Item 2",
media: [
{
backgroundColor: { key: "--color-background-1" },
backgroundImage: {
src: "https://images.unsplash.com/photo-1506953823976-52e1fdc0149a?q=80&w=2535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "First image",
},
},
{
backgroundColor: { key: "--color-background-1" },
backgroundImage: {
src: "https://plus.unsplash.com/premium_photo-1675667381451-be2fc08a122e?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "First image",
},
},
],
},
];

const navigationDefault = [
{
media: [
{
backgroundColor: { key: "--color-background-1" },
backgroundImage: {
src: "https://plus.unsplash.com/premium_photo-1673461703605-0c6cc77e1a35?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "First image",
},
},
{
backgroundColor: { key: "--color-background-1" },
backgroundImage: {
src: "https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "First image",
},
},
],
},
];

const BlockWrapper = styled("div")`
width: 100%;
height: 500px;
display: flex;
border: 1px solid blue;
`;

const HeadingWrapper = styled("div")`
margin-bottom: 38px;
`;

const LinkWrapper = styled("div")`
padding-bottom: 16px;
`;

const Links = styled("div")``;

const MediaWrapper = styled("div")``;

const BackgroundWrapper = styled("div")`
display: none;
max-width: 100%;

&.show-media {
display: block;
position: absolute;

&:first-child {
left: 50%;
width: 100%;
padding-top: 100%; /* 1:1 aspect ratio */
z-index: 1;
border: 1px solid red;
}

&:last-child {
width: 30%;
padding-top: 45%; /* 2:3 aspect ratio */
z-index: 2;
border: 1px solid green;
}
}
`;

const Background = styled("div")`
background-image: url(${(props) => props.src});
background-size: cover;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
`;

export default function App() {
const defaultMediaId = "default-media";
const [activeId, setActiveId] = useState(defaultMediaId);

const handleMouseEnter = (id) => setActiveId(id);
const handleMouseLeave = () => setActiveId(defaultMediaId);

const renderMedia = (media, id) => (

{media &&
media.map((mediaItem, index) =>  (



))}

);

return (



Heading
{navigationData.map(({ id, src, label }, index) => (

[url={src}
active={activeId === id}
onMouseEnter={() =] handleMouseEnter(id)}
onMouseLeave={handleMouseLeave}
>
{label}
[/url]

))}

{navigationDefault.map((defaultMedia, index) =>
renderMedia(defaultMedia.media, defaultMediaId)
)}
{navigationData.map(
({ id, label, media }) => media && renderMedia(media, id)
)}


);
}

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

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