/* ==========================================
   Fantasy CMS
   Modal
========================================== */

.modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.85);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9999;

}

.modal.active{

    opacity:1;

    visibility:visible;

}

.modal-content{

    position:relative;

    width:min(95%,1100px);

    max-height:90vh;

    background:#111;

    border-radius:16px;

    overflow:hidden;

    display:grid;

    grid-template-columns:2fr 1fr;

}

.modal-image{

    width:100%;

    height:80vh;

    object-fit:cover;

    display:block;

    background:#000;

}

.modal-info{

    padding:40px;

    color:#fff;

    overflow-y:auto;

}

.modal-info h2{

    color:#d4af37;

    margin-bottom:20px;

    font-size:2rem;

}

.modal-info p{

    line-height:1.8;

}

.modal-close{

    position:absolute;

    top:15px;

    right:15px;

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.5);

    color:#fff;

    font-size:28px;

    cursor:pointer;

    z-index:10;

}

.modal-prev,
.modal-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.5);

    color:#fff;

    font-size:26px;

    cursor:pointer;

    z-index:10;

}

.modal-prev{

    left:15px;

}

.modal-next{

    right:15px;

}

.modal-prev:hover,
.modal-next:hover,
.modal-close:hover{

    background:#d4af37;

    color:#111;

}

@media(max-width:768px){

    .modal-content{

        grid-template-columns:1fr;

        width:95%;

    }

    .modal-image{

        height:45vh;

    }

    .modal-info{

        padding:20px;

    }

}