*,*::before,*::after{box-sizing:border-box}
.gallery-cards-container{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  min-height:500px;
  height:500px;
  padding:40px 20px;
  width:100%
}
.gallery-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:flex .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1),box-shadow .4s ease;
  flex:0 1 120px;
  height:100%;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  display:block;
  background:#000
}
.gallery-card.selected{
  flex:0 1 400px;
  box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.gallery-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s ease
}
.gallery-card.selected img{
  transform:scale(1.05)
}
.gallery-card-label{
  position:absolute;
  bottom:20px;
  left:20px;
  right:20px;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:14px 18px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.5px;
  color:#1a1a1a;
  text-align:center;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .3s ease .2s,transform .3s ease .2s;
  pointer-events:none
}
.gallery-card.selected .gallery-card-label{
  opacity:1;
  transform:translateY(0)
}
.gallery-card-arrow{
  position:absolute;
  top:20px;
  right:20px;
  width:44px;
  height:44px;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity:0;
  transform:scale(.8);
  transition:opacity .3s ease .2s,transform .3s ease .2s,background .2s ease;
  text-decoration:none;
  z-index:2
}
.gallery-card.selected .gallery-card-arrow{
  opacity:1;
  transform:scale(1)
}
.gallery-card-arrow:hover{
  background:rgba(255,255,255,1);
  transform:scale(1.1)
}
.gallery-card-arrow::before{
  content:"→";
  font-size:20px;
  font-weight:bold;
  color:#1a1a1a;
  line-height:1
}

@media (max-width:768px){
  .gallery-cards-container{min-height:400px;height:400px;gap:12px;padding:20px 10px}
  .gallery-card{flex:0 1 80px}
  .gallery-card.selected{flex:0 1 280px}
  .gallery-card-label{font-size:12px;padding:10px 14px;bottom:16px;left:16px;right:16px;letter-spacing:.3px}
  .gallery-card-arrow{width:38px;height:38px;top:16px;right:16px}
  .gallery-card-arrow::before{font-size:16px}
}