.gallery{
    padding:150px 0 120px;
}

.gallery-title{
    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:70px;
}

.gallery-title span{
    color:var(--primary);
    font-weight:600;
    letter-spacing:2px;
    font-size:13px;
}

.gallery-title h1{
    font-family:var(--font-display);
    font-size:54px;
    font-weight:600;
    margin:20px 0;
    line-height:1.15;
    color:var(--ink);
}

.gallery-title p{
    color:var(--ink-soft);
    line-height:1.8;
    font-weight:300;
}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:26px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

    background:var(--surface);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:.4s;

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.gallery-item img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.5s;

    display:block;

}

.gallery-item:hover img{

    transform:scale(1.06);

}

.overlay{

    position:absolute;

    bottom:0;

    width:100%;

    padding:20px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.65)
    );

    color:white;

}

.overlay h3{

    margin-bottom:6px;

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

}

.modal{

    display:none;

    position:fixed;

    z-index:999;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(20,15,13,.92);

    justify-content:center;

    align-items:center;

}

.modal-content{

    max-width:85%;

    max-height:85%;

    border-radius:16px;

}

.close{

    position:absolute;

    top:30px;

    right:45px;

    color:white;

    font-size:42px;

    cursor:pointer;

}