/* Novin Product Gallery v1.0.0 */

.npg-section,
.npg-section *{
    box-sizing:border-box;
}

.npg-section{
    width:100%;
    background:#FAF8F4;
}

.npg-inner{
    width:100%;
    margin-inline:auto;
}

/* Header */
.npg-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:28px;
}

.npg-heading{
    min-width:0;
}

.npg-eyebrow{
    margin:0 0 8px;
    font-family:Manrope,Vazirmatn,sans-serif;
    font-size:11.5px;
    line-height:1.5;
    font-weight:800;
    letter-spacing:.12em;
    color:#9C7A45;
}

.npg-title{
    margin:0;
    font-family:Vazirmatn,Manrope,sans-serif;
    font-size:clamp(21px,2.2vw,26px);
    line-height:1.5;
    font-weight:800;
    color:#141414;
}

.npg-all-link{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:#141414;
    text-decoration:none!important;
    font-family:Vazirmatn,Manrope,sans-serif;
    font-size:13px;
    line-height:1.5;
    transition:color .25s ease;
}

.npg-all-link:hover,
.npg-all-link:focus{
    text-decoration:none!important;
}

.npg-all-link-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.npg-all-link-icon svg{
    display:block;
}

/* Grid */
.npg-grid{
    --npg-large:14;
    --npg-small:10;
    --npg-mobile-small-height:110px;
    display:grid;
    direction:ltr;
    grid-template-columns:
        minmax(0, calc(var(--npg-small) * 1fr))
        minmax(0, calc(var(--npg-small) * 1fr))
        minmax(0, calc(var(--npg-large) * 1fr));
    grid-template-rows:1fr 1fr;
    grid-template-areas:
        "item4 item2 item1"
        "item5 item3 item1";
    gap:12px;
    height:460px;
}

.npg-large-left .npg-grid{
    grid-template-columns:
        minmax(0, calc(var(--npg-large) * 1fr))
        minmax(0, calc(var(--npg-small) * 1fr))
        minmax(0, calc(var(--npg-small) * 1fr));
    grid-template-areas:
        "item1 item2 item4"
        "item1 item3 item5";
}

.npg-item{
    position:relative;
    display:block;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border-radius:14px;
    background:#C9C5BB;
    text-decoration:none!important;
    direction:rtl;
    box-shadow:0 16px 34px -22px rgba(20,18,14,.30);
}

.npg-item-1{grid-area:item1;}
.npg-item-2{grid-area:item2;}
.npg-item-3{grid-area:item3;}
.npg-item-4{grid-area:item4;}
.npg-item-5{grid-area:item5;}

/* Items after first 5 */
.npg-item:nth-child(n+6){
    grid-column:span 1;
    min-height:180px;
}

.npg-media{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#C9C5BB;
}

.npg-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    filter:brightness(.82);
    transition:
        transform .60s cubic-bezier(.22,.61,.36,1),
        filter .40s ease;
}

.npg-item:hover .npg-media img{
    transform:scale(1.06);
    filter:brightness(.90);
}

.npg-placeholder{
    position:relative;
    z-index:1;
    display:block;
    max-width:80%;
    padding:12px;
    color:#817D73;
    font-family:Manrope,Vazirmatn,sans-serif;
    font-size:10.5px;
    line-height:1.7;
    font-weight:700;
    text-align:center;
    direction:rtl;
}

.npg-caption-scrim{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(0deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 60%);
    pointer-events:none;
}

.npg-caption{
    position:absolute;
    right:14px;
    bottom:12px;
    z-index:4;
    display:block;
    color:#fff;
    font-family:Vazirmatn,Manrope,sans-serif;
    font-size:12px;
    line-height:1.4;
    font-weight:700;
    text-shadow:0 2px 8px rgba(0,0,0,.30);
}

.npg-more-overlay{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(10,10,10,.62);
}

.npg-more-text{
    display:block;
    color:#fff;
    font-family:Manrope,Vazirmatn,sans-serif;
    font-size:17px;
    line-height:1;
    font-weight:800;
    direction:ltr;
}

/* Tablet */
@media(max-width:1024px){
    .npg-header{
        gap:18px;
    }
}

/* Mobile layout follows the source: large first, four smaller tiles */
@media(max-width:767px){

    .npg-mobile-header-stack .npg-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .npg-mobile-header-row .npg-header{
        flex-direction:row;
        align-items:flex-end;
    }

    .npg-grid,
    .npg-large-left .npg-grid{
        display:grid;
        height:auto!important;
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
        grid-template-areas:
            "item1 item1"
            "item2 item4"
            "item3 item5";
    }

    .npg-item-1{
        height:var(--npg-mobile-large-height,200px);
    }

    .npg-item-2,
    .npg-item-3,
    .npg-item-4,
    .npg-item-5{
        height:var(--npg-mobile-small-height,110px);
    }

    .npg-item:nth-child(n+6){
        height:var(--npg-mobile-small-height,110px);
        min-height:0;
    }

    .npg-title{
        font-size:22px;
    }

    .npg-all-link{
        font-size:12px;
    }
}