<div class="ov_viewCard_Main">
<div class="ov_viewCard_Text">
<h1>Main</h1>
<p>New line line line line line line line line line line</p>
</div>
<div class="ov_viewCard_Cards">
<div class="ov_viewCard_Item"></div>
<div class="ov_viewCard_Item"></div>
<div class="ov_viewCard_Item"></div>
<div class="ov_viewCard_Item"></div>
<div class="ov_viewCard_Item"></div>
<div class="ov_viewCard_Item"></div>
<div class="ov_viewCard_Item"></div>
</div>
</div>
.ov_viewCard_Main {
border: solid 1px black;
border-radius: 50px;
background-color: rgb(224, 143, 218);
display: flex;
flex-direction: column;
margin: 0 12.6rem;
padding: 0 5rem;
margin-bottom: 3rem;
}
.ov_viewCard_Text {
text-align: left;
}
.ov_viewCard_Cards {
background-color: rgb(151, 143, 224);
display: flex;
flex-wrap: wrap;
margin: 0 5rem;
margin-bottom: 5rem;
}
.ov_viewCard_Item {
width: 20rem;
height: 25rem;
background-color: rgb(136, 50, 50);
border: solid 1px rgb(42, 199, 42);
margin: 0 1rem;
margin-bottom: 2rem;
}
есть три карточки, они однотипны,
карточки находятся в позиции absolute или fixed,
их расположение можно выставить или через объект document, window, или просто transform: translate, left, right,
у карточек есть стили и идентификаторы,
у стилей прописана анимация через KeyFrame,
на событие Click ставите стиль выдвигания, после второго клика стиль задвигания (реверс),
по сути функция переключатель, включить-выключить toggle,
отрабатываете одну карточку,
далее слоями через z-index, добавляете ещё две карточки,
и настраиваете отступ выдвижения в стилях.