CSS Flex grid with overflow in X axis - html

Question

I am trying to create a grid of tiles, which sounds easy enough.
The problem I run into is that I want to have each row overflow in the X axis and each tile to expand on hover.
When the tile is expanded on hover it should only push aside its siblings, not the row above/below.
I have made a version that works, but the code is not exactly elegant and the only reason in works is using negative bottom-margins to push the lines lines together as well as setting the aspect ratio on the background image. The way I understand it this happens because Flex is trying to fit all items into it's container. I also don't quite understand how setting the aspect ratio of the image can override flexbox's need to fit everything inside the frame.
I've made a code pen of it demonstrating the code, but I would love for someone to help me coming up with a better solution since this is quite messy!
If this could be achieved in HTML and CSS only that would be great.
So here's the requirements I want to have:
several rows with 11 tiles that overflows in the X direction without creating scrollbars so that the user can horizontal scroll on each line
when hovering over a tile it should push the items in the same row to the side, but not the line above/below
when hovering the tile size should increase by X%, but the content (text) should not increase in size
the box-shadow should not be cut off by the line below when hovering
Link to codepen
HTML:
<div class="grid">
<div class="row">
<div class="tile">
<div class="text">
<p>Text</p>
</div>
<img class="background-image" src="">
</div>
</div>
</div>
CSS
grid {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
/* firefox */
scrollbar-width: none;
overflow-x: auto;
}
/* chrome */
.grid::-webkit-scrollbar {
display: none;
}
.row {
position: relative;
display: flex;
align-items: center;
gap: 1vw;
height: 12vw;
margin-bottom: -4vw;
overflow-y: hidden;
/* FireFox */
scrollbar-width: none;
}
/* chrome */
.row::-webkit-scrollbar {
display: none;
}
.tile {
position: relative;
height: 6vw;
width: 10vw;
transition: 350ms all;
}
.tile:hover {
height: 8vw;
width: 13vw;
z-index: 2;
box-shadow: 1vw 0.5vw 1vw #00000075;
}
.text {
position: absolute;
bottom: 0;
font-size: 1.5vw;
height: 30%;
transition: all 250ms;
}
.tile:hover .text {
font-size: 2.5vw;
height: 100%;
z-index: 3;
}
.background-image {
object-fit: cover;
object-position: 50% 10%;
aspect-ratio: 1.62/1;
height: 100%;
}