.modal-dialog.drawer {
    min-height: 100%;
    margin: 0 0 0 auto;
    background: #fff;
    /*position: fixed;*/
    /*right: 0;*/
    /*border: none;*/
    /*top: 0;*/
    /*height: 100%;*/
    /*border-radius: 0;*/
    /*overflow-y: scroll;*/
}
.modal.fade .modal-dialog.drawer{
    -webkit-transform: translate(100%,0)scale(1);
    transform: translate(100%,0)scale(1);
    width: 800px;
}
.modal.fade.show .modal-dialog.drawer{
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
}

.modal-dialog.drawer .modal-content{
    border: none;
    border-radius: 0;
    overflow-y: scroll;
}

.drawer-events{
    padding: 1rem .5rem;
    cursor: pointer;
    transition: box-shadow 1s;
}
.drawer-events:hover{
    box-shadow: 0 .5rem .5rem rgba(0,0,0,.075);
}
.drawer-events .image{
    width: 100px;
    height: auto;
    object-fit: cover;
    border-radius: 0.25rem;
    overflow: hidden;
}

.drawer-events .blog-title{
    font-size: 1rem;
    margin-top: 2px;
    margin-bottom: 0;
}
.drawer-events .blog-meta span,
.drawer-events .blog-meta a{
    font-size: .8rem;
    margin-bottom: 0;
}

.drawer-events .blog-meta i{
    color: var(--primary-deep-green)
}

@media (max-width:575px) {
    .modal.fade .modal-dialog.drawer{
        width: 100%;
    }
    .drawer-events .image{
        width: 100%;
        margin-bottom: 1rem;
    }
}