Выделите элемент в div и установите его над другими элементами

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

Моя проблема: единственный подход, который у меня есть до сих пор, выглядит так: Цвета означают то же самое, но теперь все они выровнены по центру и имеют одинаковую ширину.

Некоторые фрагменты кода:

HTML

<header>
    <div class = "spotlight">
        <div class = "spotlight-back">
            <img src = "assets\covers\large\6.jpg" />
            <img src = "assets\images\testbild6.jpg" />
        </div>
        <div class = "spotlight-back">
            <img src = "assets\covers\large\4.jpg" />
            <img src = "assets\images\testbild.jpg" />
        </div>
    </div>
</header>

CSS

header {
    background: rgba(255, 0, 0, .25);
    width: 100%;
    height: 400px;
    margin: 0;
    padding: 0;
    display: flex;
}

.spotlight {
    border: 1px solid black;
    margin: auto;
    background: rgba(30, 255, 0, .25);
    height: 85%;
    width: 95%;
    display: flex;
}

.spotlight-back {
    position: relative;
    border: 1px solid black;
    margin: auto;
    background: rgba(0, 26, 255, .25);
    height: 100%;
    width: 45%;
    display: flex;
    overflow: hidden;
}

.spotlight-back img {
    height: 100%;
}

Некоторые свойства, такие как фон или граница, предназначены только для тестирования.

Надеюсь, у вас есть для меня какое-то решение. Спасибо :)