/* ===========================
   BUMBY GALLERY
   FLASH + PORTFOLIO
=========================== */


/* ===========================
   DESKTOP GRID
=========================== */


.flash-grid,
.portfolio-grid {

    display:grid;

    grid-template-columns:

    repeat(auto-fit, minmax(280px, 1fr));


    gap:40px;

}





.gallery-card {


    background:#fff;


    border-radius:20px;


    overflow:hidden;


    position:relative;


    box-shadow:

    0 15px 40px rgba(80,50,70,.12);


    transition:

    transform .45s cubic-bezier(.22,1,.36,1),

    box-shadow .45s ease;

}





.gallery-card:nth-child(odd){

    transform:rotate(-1.5deg);

}



.gallery-card:nth-child(even){

    transform:rotate(1.5deg);

}



.gallery-card:hover {


    transform:

    translateY(-12px)

    rotate(0deg);



    box-shadow:

    0 35px 80px rgba(80,50,70,.22);

}





.gallery-card img {


    width:100%;


    aspect-ratio:1 / 1.2;


    object-fit:cover;


}





.gallery-info {


    padding:25px;


    background:white;


}





.gallery-info h3 {


    font-family:var(--font-title);


    font-size:2rem;


    color:var(--purple);


    margin-bottom:8px;


}





.gallery-info p {


    color:var(--brown);


}







.gallery-card::after {


    content:"";


    position:absolute;


    width:45px;


    height:45px;


    top:15px;


    right:15px;


    background:var(--pink-soft);


    border-radius:50%;


    opacity:.7;


    transition:.4s ease;

}



.gallery-card:hover::after {


    transform:scale(1.3);


}







/* ===========================
   FLASH STATUS
=========================== */


.flash-status {


    display:inline-block;


    padding:6px 15px;


    border-radius:30px;


    font-size:.8rem;


    margin-bottom:15px;


}



.flash-status.available {


    background:#dcefdc;


    color:#4f7a52;


}



.flash-status.taken {


    background:#f4dddd;


    color:#9a5555;


}






/* ===========================
   CAROUSEL MOBILE
=========================== */


.flash-track,
.portfolio-track {


    display:flex;


    gap:35px;


    overflow-x:auto;


    scroll-behavior:smooth;


    scrollbar-width:none;


    padding:30px 0;


}



.flash-track::-webkit-scrollbar,
.portfolio-track::-webkit-scrollbar {


    display:none;


}






.flash-card,
.portfolio-card {


    flex:

    0 0 320px;


    background:white;


    border-radius:30px;


    overflow:hidden;


    box-shadow:

    0 20px 50px rgba(80,50,70,.15);


}





.flash-card img,
.portfolio-card img {


    width:100%;


    height:420px;


    object-fit:cover;


}







/* ===========================
   BOUTONS
=========================== */


.flash-prev,
.flash-next,
.portfolio-prev,
.portfolio-next {


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    width:55px;


    height:55px;


    border-radius:50%;


    border:none;


    background:white;


    color:var(--purple);


    font-size:2rem;


    cursor:pointer;


    box-shadow:

    0 10px 30px rgba(0,0,0,.15);


    z-index:5;

}



.flash-prev,
.portfolio-prev {

    left:10px;

}



.flash-next,
.portfolio-next {

    right:10px;

}





/* ===========================
   DRAG
=========================== */


.flash-track {


    cursor:grab;


    user-select:none;


}



.flash-track.dragging {


    cursor:grabbing;


    scroll-behavior:auto;


}



.flash-track img {


    pointer-events:none;


}






/* ===========================
   MOBILE
=========================== */


@media(max-width:900px){



    .flash-grid,
    .portfolio-grid {


        display:block;


        position:relative;


        overflow:hidden;


    }



    .flash-track,
    .portfolio-track {


        padding-left:

        20px;


        padding-right:

        20px;


    }



}





@media(max-width:600px){



    .flash-track,
    .portfolio-track {


        gap:20px;


        padding-left:

        9px;


        padding-right:

        9px;

        scroll-padding-left:

        10px;

    }





    .flash-card,
    .portfolio-card {


        flex:

        0 0 60vw;


    }





    .flash-card img,
    .portfolio-card img {


        height:auto;


        aspect-ratio:1 / 1.2;


    }





    .flash-prev,
    .flash-next,
    .portfolio-prev,
    .portfolio-next {


        display:none;


    }





    .gallery-card:nth-child(n){


        transform:none;


    }


}