.banner-card {
  width: 52px;
  height: 196px;
  border-radius: 8px;
  backdrop-filter: blur(2px);
  z-index: 20;
  background-position: center !important;
  background-size: cover !important;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.banner-card.active {
  width: 168px;
  height: 196px;
}

.banner-card-inner {
  width: 168px;
  height: 196px;
  border-radius: 8px;
    background: rgba(3, 13, 22, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px 30px;
  transition: all 0.4s ease-in-out;
}
.banner-card p {
  transition: all 0.4s ease-in-out;
  rotate: -90deg;
  transform-origin: left;
  text-align: center;
}
.banner-card.active p {
  rotate: 0deg;
}

/* Küçük ekranlar : 640px üstü (sm) */
@media (min-width: 40rem) {
  .banner-card {
    width: 100px;
    height: 300px;
    border-radius: 30px;
  }
  .banner-card.active {
    width: 260px;
    height: 300px;
  }
  
  .banner-card-inner {
    width: 260px;
    height: 300px;
    border-radius: 30px;
  }
 
}
/* Küçük ekranlar : 768px (sm) */
@media (min-width: 48rem) {
  .banner-card {
    width: 120px;
    height: 340px;
    border-radius: 30px;
  }
  .banner-card.active {
    width: 300px;
    height: 340px;
  }
  
  .banner-card-inner {
    width: 300px;
    height: 340px;
    border-radius: 30px;
  }
 
}
@media (min-width: 64rem) {

}
@media (min-width: 80rem) {
  .banner-card {
    width: 170px;
    height: 490px;
    border-radius: 30px;
    backdrop-filter: blur(2px);
    z-index: 20;
    background: url("/public/assets/images/whocanapplycard.png");
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
  }
  .banner-card.active {
    width: 376px;
    height: 490px;
  }
  
  .banner-card-inner {
    width: 376px;
    height: 490px;
    border-radius: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 24px 30px;
    transition: all 0.4s ease-in-out;
  }
  .banner-card p {
    transition: all 0.4s ease-in-out;
    rotate: -90deg;
    transform-origin: left;
  }
  .banner-card.active p {
    rotate: 0deg;
  }
}