@import url("style.css");

.hero-text h1{
    margin:0;
    color:#272933;
    font-size:clamp(64px, 10vw, 96px);
    line-height:1;
}

.art-scroll-box{
    scrollbar-width: thin;
}

.art-modal{
    position:fixed;
    inset:0;
    z-index:999;
    display:none;
    align-items:center;
    justify-content:center;
}

.art-modal.open{
    display:flex;
}

.art-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(39,41,51,.65);
}

.art-modal-content{
    position:relative;
    z-index:1;
    width:min(90vw, 520px);
    max-height:80vh;
    background:#f7f7f2;
    border-radius:18px;
    padding:18px;
    box-sizing:border-box;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.art-modal-content img{
    display:block;
    width:100%;
    height:auto;
    max-height:calc(80vh - 36px);
    object-fit:contain;
    border-radius:12px;
}

.art-modal-close{
    position:absolute;
    top:8px;
    right:8px;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:#272933;
    color:#f7f7f2;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    z-index:2;
}