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

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

body.photo-page{
    background:#fff;
    color:#444;
    font-family:"Yu Gothic","Yu Gothic UI",sans-serif;
}

/* ========================================
   BACK
======================================== */

.back-link{
    position:fixed;
    top:28px;
    left:32px;

    color:#777;
    text-decoration:none;

    font-size:15px;
    letter-spacing:1px;

    transition:.3s;
    z-index:100;
}

.back-link:hover{
    color:#b8daf8;
}

/* ========================================
   PAGE
======================================== */

.photo-work{
    width:100%;
    min-height:100vh;

    padding:40px 55px 80px;
}

/* ========================================
   TITLE
======================================== */

.photo-title{
    margin-bottom:55px;
}

.photo-title p{
    color:#b8daf8;

    font-size:20px;
    font-weight: 1000;

    letter-spacing: 8px;

    margin-top: 36px;
    margin-bottom:10px;
    margin-left: 14px;
}

.photo-title h1{
    font-size:64px;
    font-weight:300;
    letter-spacing:3px;
    color:#444;

    margin-bottom: 0px;
}

.photo-title span{
    display:block;

    margin-top:0px;

    font-size:22px;
    line-height:1.8;

    color:#999;
}

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

.photo-gallery{

    width:min(1750px,96vw);

    margin:40px auto 0;

    display:grid;
    grid-template-columns:1fr 180px;

    gap:10px;

    align-items:center;
}

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

.main-photo{
    
    width:100%;
    height: 68vh;


    border-radius:20px;
    overflow:hidden;

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

.main-photo img{

    max-width:90%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    display:block;

    border-radius:20px;

    transition:opacity .25s ease;
}

.main-photo iframe {
    width: 90%;
    height: 68vh;
    margin: 0 auto;
    border: none;
    border-radius: 20px;
    display: block;
}

/* ========================================
   THUMBNAIL
======================================== */

.thumb-list{

    position: relative;
    z-index: 10;

    width: 250px;

    display:flex;
    flex-direction:column;

    gap:18px;

    align-items:center;

    max-height: 68vh;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 12px;
    
    scrollbar-width:thin;
    scrollbar-color:#b8daf8 transparent;
}

.thumb-list img{

    width:208px;
    height:130px;

    object-fit:contain;
    border-radius:14px;

    cursor:pointer;

    opacity:.45;

    transition:.25s;
}

.thumb-list img:hover{

    opacity:.85;

    transform:translateX(-6px);
}

.thumb-list img.active{

    opacity:1;

    transform:translateX(-10px);

    border:2px solid #b8daf8;
}

.thumb-list::-webkit-scrollbar{
    width:6px;
}

.thumb-list::-webkit-scrollbar-track{
    background:transparent;
}

.thumb-list::-webkit-scrollbar-thumb{
    background:#d8eaf8;
    border-radius:10px;
}

.thumb-list::-webkit-scrollbar-thumb:hover{
    background:#b8daf8;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width:900px){

.photo-work{

    padding:90px 25px;
}

.photo-title h1{

    font-size:40px;
}

.photo-title span{

    font-size:17px;
}

.photo-gallery{

    display:block;

    width:100%;
}

.main-photo img{

    width:100%;
    height:auto;
}

.thumb-list{

    margin-top:30px;

    flex-direction:row;

    overflow-x:auto;

    justify-content:flex-start;

    gap:15px;
}

.thumb-list img{

    width:120px;
    height:75px;

    flex:0 0 auto;
}

.back-link{

    top:22px;
    left:22px;
}

}