/* ==========================================================
   Herend Gallery v1.0
   ========================================================== */

.herend-gallery{
    position:relative;
    width:100%;
    max-width:600px;
    margin:20px auto;
    background:#fff;
    overflow:hidden;
    user-select:none;
}

/*==============================
  Main
==============================*/

.hg-main{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#fff;
    touch-action:pan-y;
}
.hg-main.hg-500{ aspect-ratio:600/500; }

.hg-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .6s ease;
}

.hg-slide.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:2;
    animation:hgFade .6s;
}

.hg-slide img{
    display:block;
    width:100%;
    height:100%;
    max-width:600px;
    object-fit:contain;
    background:#fff;
    -webkit-user-drag:none;
    user-select:none;
}

/*==============================
  Caption
==============================*/

.hg-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    padding:12px;

    color:#222;
    background:rgba(0,0,0,.25);

    box-sizing:border-box;
    z-index:5;
}

.hg-caption h3{
    margin:0px;
    font:400 18px/1.3 "Times New Roman","Yu Mincho",serif;
    text-align:center;
}

.hg-caption p{
    margin:0;
    font-size:15px;
    line-height:1.8;
}

/*==============================
  Thumbnail
==============================*/

.hg-thumbs{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:18px 0;
    scroll-behavior:smooth;
    scrollbar-width:thin;
}

.hg-thumbs::-webkit-scrollbar{ height:8px; }

.hg-thumbs::-webkit-scrollbar-thumb{
    background:#c9c9c9;
    border-radius:20px;
}

.hg-thumb{
    flex:0 0 auto;
    width:90px;
    border:2px solid transparent;
    cursor:pointer;
    transition:.25s;
}

.hg-thumb img{ display:block; width:100%; }

.hg-thumb:hover{ transform:translateY(-2px); }

.hg-thumb.active{ border-color:#000; }

/*==============================
  Dots
==============================*/

.hg-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:10px 0 20px;
}

.hg-dot{
    width:10px;
    height:10px;
    background:#cfcfcf;
    border-radius:50%;
    transition:.3s;
}

.hg-dot.active{
    background:#222;
    transform:scale(1.2);
}

/*==============================
  Prev / Next
==============================*/

.hg-prev,
.hg-next{
    position:absolute;
    top:45%;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    color:#333;
    font-size:26px;
    cursor:pointer;
    transform:translateY(-50%);
    transition:.25s;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    z-index:20;
}

.hg-prev{ left:15px; }

.hg-next{ right:15px; }

.hg-prev:hover,
.hg-next:hover{ background:#fff; }

/*==============================
  Loading
==============================*/

.herend-gallery.loading .hg-main{
    background:linear-gradient(90deg,#f6f6f6,#ececec,#f6f6f6);
    background-size:300% 100%;
    animation:hgLoading 1.4s infinite;
}

/*==============================
  Animation
==============================*/

@keyframes hgFade{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes hgLoading{
    from{ background-position:100% 0; }
    to{ background-position:-100% 0; }
}

/*==============================
  Responsive
==============================*/

@media (max-width:900px){

    .herend-gallery{ margin:25px auto; }

}

@media (max-width:768px){

    .hg-caption{ padding:10px; }

    .hg-caption h3{ font-size:18px; }

    .hg-caption p{
        font-size:14px;
        line-height:1.7;
    }

    .hg-thumb{ width:72px; }

    .hg-prev,
    .hg-next{
        width:38px;
        height:38px;
        font-size:22px;
    }

}

@media (max-width:480px){

    .hg-thumb{ width:60px; }

    .hg-caption h3{ font-size:14px; }

    .hg-caption p{ font-size:13px; }

    .hg-dots{ gap:6px; }

    .hg-dot{
        width:8px;
        height:8px;
    }

}