/* https://codepen.io/stefcharle/pen/Gydvbx */

.gallery-wrap {
display: flex;
gap: 1rem;
width: 100%;
height: 60vh;
padding: 2rem;
padding-top: 0;
transition: all 0.4s ease-in-out;
}

.item {
flex: 1;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
transition: flex 0.8s ease;
}
.item:hover {
flex: 5;
}

@media only screen and (max-width: 500px)
{
    .gallery-wrap {
        gap: 0.5rem;
        height: 30vw;
        padding: 1rem;
        padding-top: 0;
    }
    .item {
        background-size: 200% auto;
    }
    .item:hover {
        flex: 5;
    }

    .gallery-wrap:has(.item:hover) {
        height: 40vh;
    }
}