/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
    overflow-x:hidden;

}

/* ==========================
   GALLERY
========================== */

.gallery{

    width:100%;
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;

    padding:40px 70px;

}

/* ==========================
   SLIDER
========================== */

.slider{

    width:100%;
    max-width:1400px;

    overflow:hidden;

}

/* ==========================
   TRACK
========================== */

.track{

    display:flex;

    transition:transform .2s ease;

}

/* ==========================
   SLIDE
========================== */

.slide{

    min-width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:30px;

}

/* ==========================
   PHOTO
========================== */

.photo{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    background:white;

    padding:15px;

    border-radius:18px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.08);

}

/* ==========================
   IMAGE
========================== */

.photo img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

    border-radius:12px;

}

/* ==========================
   BUTTON
========================== */

.nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:white;

    cursor:pointer;

    font-size:22px;

    box-shadow:0 5px 15px rgba(0,0,0,.2);

}

.prev{

    left:10px;

}

.next{

    right:10px;

}

/* ==========================
   DOT
========================== */

.dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin:25px 0;

}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#cfcfcf;

    cursor:pointer;

}

.dot.active{

    background:#222;

}

/* ==========================
   TABLET
========================== */

@media(max-width:900px){

.gallery{

    padding:30px;

}

.slide{

    gap:15px;

}

}

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

@media(max-width:768px){

.gallery{

    padding:20px;

}

.slide{

    flex-direction:column;

}

.photo{

    width:100%;

}

.photo img{

    width:100%;

    height:auto;

}

.nav{

    display:none;

}

}