/* ==========================================
   Aesthetic Flow Gallery v2
========================================== */

.avb-slider{
    width:100%;
    overflow:hidden;
    position:relative;
    padding:12px 0;
}

.avb-track{
    display:flex;
    align-items:center;
    gap:20px;
    width:max-content;
}

.avb-item{
    flex:0 0 auto;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:280px;
    overflow:hidden;
    border-radius:24px;
    background:transparent;
    cursor:pointer;
    transition:transform .35s ease;
    isolation:isolate;
}

.avb-item:hover{
    transform:translateY(-8px);
}

/* ==========================
   Shared Media (Image + Video)
========================== */

.avb-media{
    display:block;
    height:100%;
    width:auto;
    max-height:100%;
    max-width:520px;
    object-fit:contain;
    object-position:center;
    border-radius:24px;
    flex-shrink:0;
    transition:transform .35s ease;
}

.avb-item:hover .avb-media{
    transform:scale(1.04);
}

/* ==========================
   Title
========================== */

.avb-title{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:18px;
    color:#fff;
    font-size:16px;
    font-weight:600;
    opacity:0;
    transition:.3s;
    background:linear-gradient(to top,rgba(0,0,0,.7),transparent);
}

.avb-item:hover .avb-title{
    opacity:1;
}

/* ==========================
   Mobile
========================== */

@media(max-width:767px){

    .avb-track{
        gap:12px;
    }

    .avb-item{
        height:180px;
    }

    .avb-media{
        max-height:100%;
        max-width:320px;
    }

    .avb-title{
        font-size:14px;
        padding:12px;
    }

}
/* ===============================
   Aesthetic Holographic Sheen
================================ */

.avb-item{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.avb-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        115deg,
        transparent 0%,
        rgba(255,255,255,.04) 20%,
        rgba(180,220,255,.08) 35%,
        rgba(255,255,255,.03) 50%,
        rgba(255,200,255,.08) 65%,
        rgba(255,255,255,.03) 80%,
        transparent 100%
    );

    background-size:250% 100%;

    mix-blend-mode:screen;

    opacity:.35;

    pointer-events:none;

    animation:avbHologram 14s linear infinite;

    z-index:2;

}

@keyframes avbHologram{

    0%{

        background-position:-250% 0;

    }

    100%{

        background-position:250% 0;

    }

}

.avb-item:hover::before{

    opacity:.55;

    animation-duration:7s;

}