.event-item-wrapper{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    height:220px;
    gap:25px;

    justify-content: space-between;

    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x)/ -2);
    margin-left: calc(var(--bs-gutter-x)/ -2);
}
#calendar-sidebar-container.event-item-wrapper{
    height:650px;
    row-gap: 5px;
    column-gap: 20px;
}

#calendar-sidebar-container.event-item-full{
    width:125px
}
#calendar-sidebar-container.event-item-image{
    height:125px;
}



.event-item-full{
    width:150px
}
.event-item-image{
    height:150px;
}
.event-item-date{
    height:24px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: space-around;

}
.event-item-dow{
    color:white;
    font-weight: 700;
    width:40px;
    padding:0 8px;
    background-color: #f8bbd0;
}
.event-item-day{
    text-align: right;
    padding: 0 5px;
}
.event-item-title{
    height:40px;
    text-overflow: ellipsis;
    font-size:.9em;
}

@media (max-width: 35.0em) {
    .event-item-wrapper{
        font-size:0.75em;
        height:540px;
        row-gap: 5px;
        column-gap: 20px;
        justify-content: space-around;
    }
    .event-item-full{
        width:125px
    }
    .event-item-image{
        height:125px;
    }
    .event-item-date{
        height:18px;
    }
    .event-item-title{
        height:34px;
        text-overflow: ellipsis;
    }
    
}

@media (min-width:35.1em) and (max-width: 48.0em) {
    .event-item-wrapper{
        font-size:0.8em;
        height:190px;
        gap:15px;
    }
    .event-item-full{
        width:125px
    }
    .event-item-image{
        height:125px;
    }
    .event-item-date{
        height:20px;
    }
    
}