Как сверстать поднимающуюся карточку товара с тенью?

Пытаюсь сделать что бы при наведении на карточку товара она приподнималась, и за ней увеличивалась тень, но тень почему то не увеличивается, в общем буду рад если кто то поможет сверстать такую конструкцию)

Просто hover’ом выдвигай блок вперед (z-index), создавай тень (box-shadow), и можно попробовать поменять размер текста

<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, recusandae?
<div
class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, voluptatibus!
<div
class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, modi?

body {
text-align: center;
}

.
item {
margin: 5px;
width: 20vw;
height: 40vh;
transition: .3s all;
display: inline-block;
position: relative;
z-index: 1;
line-height: 14px;
}

.
item:hover {
box-shadow: 0 10px 30px #000;
z-index: 2;
font-size:17px;
}


.
item:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: orange;
transition: .5s all;
z-index: -1;
transform: scale(1);
}



.
item:hover:after {
transform: scale(1.1);
}