.reel_img_parent {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 7;
}

.reel_img_child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;  
  border-radius: 5px;
  object-fit: cover;
}
/******* Reel Design Pattern *******/
.online_salon_reel {
    position: relative;
    max-width: 100%; 
    margin: 30px auto;
}
.online_salon_reel > .cardslider-swiper-container {
    padding-bottom: 10px;
}
.online_salon_reel > .cardslider-swiper-container > .swiper-wrapper {
    width: 100%;
}
.online_salon_reel > .cardslider-swiper-container > .swiper-button-prev,
.online_salon_reel > .cardslider-swiper-container > .swiper-button-next {
    top: 50%;
}
.reel_img_parent .sns_icon_film, .reel_img_parent .sns_icon_album {
  top: 5%;
}
.reel_footer {
    width: 100%;
    position: absolute;
    bottom: 0px;
    padding: 5px 20px 10px;
    overflow: hidden;
    background: rgba(124,128,125,0.3);
}
.modal_reel_footer {
    width: inherit;
    position: absolute;
    z-index: 1;
    top: 30px;
    padding: 5px 20px 10px;
    overflow: hidden;
    background: rgba(124,128,125,0.3);
}
.reel_footer img {
    border-radius: 50%!important;
    width: 30px;
    height: 30px;
}
.modal_reel_footer img {
    border-radius: 50%!important;
    width: 40px;
    height: 40px;
}
.modal_reel_footer .instaLogo img {
    width: 35px;
    height: 35px;
}
.reel_username, .modal_reel_username {
    margin-left: 4px;
    color: white;
    padding: 1px;
    font-size: 14px;
    white-space: nowrap;
}
.modal_reel_username {
    font-size: 16px;
}
.reel_caption {
    color: white;
    margin-top: 2px;
    white-space: nowrap;
    text-align: left;
    font-size: 14px;
}
.card .reel_img_parent img, .card .reel_img_parent video {
    border-radius: 5px;
}
.online_salon_reel .cardslider-swiper-container .swiper-button-prev::after {
  background-image: url("/storage/basic/arrow_prev_b.png");
  width: 50px;
  height: 50px;
  opacity: 0.8;
}
.online_salon_reel .cardslider-swiper-container .swiper-button-next::after {
  background-image: url("/storage/basic/arrow_next_b.png");
  width: 50px;
  height: 50px;
  opacity: 0.8;
}

marquee{
    font-size: x-large;
    color: white;
    /*width: 80%;*/
}

@media screen and (max-width: 780px) {
  .reel_footer {
    padding: 5px 10px 10px;
  }
  .reel_footer img{
    width: 25px;
    height: 25px;
  }
  /*.modal_reel_footer img {
    width: 35px;
    height: 35px;
  }*/
  .reel_username {
      font-size: 12px;
  }
  /*.modal_reel_username {
      font-size: 14px;
  }*/
  .reel_caption {
      font-size: 13px;
  }
}

@media screen and (max-width: 580px) {
  .reel_footer {
    padding: 5px 8px 5px;
  }
  .reel_footer img {
    width: 23px;
    height: 23px;
  }
  /*.modal_reel_footer img {
    width: 33px;
    height: 33px;
  }*/
  .reel_username {
      font-size: 11px;
  }
  /*.modal_reel_username {
      font-size: 13px;
  }*/
  .reel_caption {
      font-size: 12px;
  }

}
@media screen and (max-width: 480px) {
  .online_salon_reel .cardslider-swiper-container .swiper-button-next::after, 
  .online_salon_reel .cardslider-swiper-container .swiper-button-prev::after {
      width: 30px;
      height: 30px;  
  }


}
@media screen and (max-width: 420px) {
  .modal_reel_footer {
    top: 0px;
  }
  .reel_footer {
    padding: 5px 5px 5px;
  }
  .reel_footer img {
    width: 20px;
    height: 20px;
  }
  /*.modal_reel_footer img {
    width: 30px;
    height: 30px;
  }*/
  .reel_username {
      font-size: 9px;
  }
  /*.modal_reel_username {
      font-size: 11px;
  }*/
  .reel_caption {
      font-size: 11px;
  }
}