.exp-gallery{
display:flex;
gap:20px;
height:380px;
font-family:Arial, sans-serif;
}

.exp-card{
flex:1.5;
position:relative;
background-size:cover;
background-position:center;
border-radius:8px;
overflow:hidden;
cursor:pointer;
transition:all .5s ease;
color:#fff;
}

/* expand */
.exp-card.active{
flex:3;
}

/* overlay gradient */
.exp-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,.85), transparent 60%);
}

/* arrow icon */
.arrow{
position:absolute;
top:20px;
right:20px;
font-size:20px;
background:rgba(255,255,255,.2);
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
backdrop-filter:blur(4px);
}

/* bottom title default */
.card-title{
position:absolute;
bottom:20px;
left:20px;
right:20px;
font-size:18px;
font-weight:600;
letter-spacing:2px;
}

/* hover content */
.card-hover{
position:absolute;
bottom:20px;
left:20px;
right:20px;
opacity:0;
transform:translateY(30px);
transition:all .4s ease;
}

.card-hover h3{
margin:0 0 10px 0;
font-size:22px;
}

.card-hover p{
font-size:14px;
line-height:1.6;
margin:0;
}

/* active state */
.exp-card.active .card-title{
opacity:0;
}

.exp-card.active .card-hover{
opacity:1;
transform:translateY(0);
}