/* =========================================================
 * Home Media Mobile Carousel V1
 * Galeri album dan video menjadi carousel hanya pada HP.
 * ======================================================= */

.home-media-carousel-controls{
  display:none;
}

@media(max-width:767.98px){
  .home-media-carousel-section{
    overflow:hidden;
  }

  .home-media-carousel-section .container{
    overflow:visible;
  }

  .home-media-carousel-section .section-title{
    margin-bottom:1.25rem!important;
  }

  .home-media-carousel-controls{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    margin:-.25rem 0 1.1rem;
    color:#6b7771;
    font-size:.8rem;
    text-align:center;
  }

  .home-media-carousel-button{
    appearance:none;
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(7,95,59,.16);
    border-radius:50%;
    color:var(--primary,#075f3b);
    background:#fff;
    box-shadow:0 8px 22px rgba(3,54,33,.10);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s ease,background .18s ease;
  }

  .home-media-carousel-button:active{
    transform:scale(.94);
  }

  .home-media-carousel-track{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:1rem!important;
    width:auto!important;
    margin-right:-12px!important;
    margin-left:0!important;
    padding:4px 12% 1.15rem 0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  .home-media-carousel-track::-webkit-scrollbar{
    display:none;
  }

  .home-media-carousel-track > *{
    flex:0 0 86%!important;
    width:86%!important;
    max-width:86%!important;
    padding-right:0!important;
    padding-left:0!important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  .home-media-carousel-track .gallery-card,
  .home-media-carousel-track .media-video-card{
    height:100%;
  }

  .home-media-carousel-track .gallery-card .img-cover{
    aspect-ratio:16/10;
    height:auto;
    object-fit:cover;
  }

  .home-media-video-track > *{
    display:flex;
    flex-direction:column;
  }

  .home-media-video-track h5{
    margin-bottom:0;
    font-size:1.05rem;
    line-height:1.35;
  }

  .home-media-carousel-progress{
    position:relative;
    width:82px;
    height:4px;
    overflow:hidden;
    margin:.15rem auto 0;
    border-radius:999px;
    background:rgba(7,95,59,.10);
  }

  .home-media-carousel-progress span{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:34%;
    border-radius:inherit;
    background:var(--primary,#075f3b);
    transform:translateX(0);
    transition:transform .2s ease,width .2s ease;
  }

  .home-media-carousel-section .d-flex.justify-content-between.align-items-end{
    gap:1rem;
  }

  .home-media-carousel-section .d-flex.justify-content-between.align-items-end > .btn{
    flex:0 0 auto;
    padding:.52rem .72rem;
    font-size:.78rem;
  }
}

@media(max-width:420px){
  .home-media-carousel-track{
    padding-right:10%!important;
  }

  .home-media-carousel-track > *{
    flex-basis:89%!important;
    width:89%!important;
    max-width:89%!important;
  }

  .home-media-carousel-controls{
    gap:.6rem;
    font-size:.74rem;
  }

  .home-media-carousel-button{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
}