.cal-event {
    height: 80px;
    position: relative;
}

.cal-event:hover {
    background: var(--Light-purple);
    border-radius: 7px;
    cursor: pointer;
    transition: background 400ms ease-in-out;
}
  
.cal-event-calendar {
    margin-right: 1rem;
    height: 80px;
    width: 80px;
    aspect-ratio: 1/1;
    background-color: var(--Light-purple);
    border-radius: 7px;
    color: var(--Purple);
    justify-content: center;
    line-height: 1;
    gap: 0.2rem;
}

.cal-event:hover .cal-event-calendar {
    background: var(--Purple);
    color: var(--White);
    transition: background 800ms;
}
  
.cal-event-month {
    text-align: center;
    font-weight: 900;
    font-size: large;
}
  
.cal-event-day {
    font-size: xx-large;
    font-weight: 900;
}
  
.cal-event-details {
    line-height: 1;
    gap: 7px;
}
  
.cal-event-title {
    font-weight: 800;
    font-size: medium;
}
  
.cal-event-info {
    gap: 5px;
}
  
.cal-event-info i{
    color: var(--Purple);
}

.cal-new{
    background: var(--Purple);
    color: var(--White);
    padding: 3px 9px;
    position: absolute;
    top: -4px;
    left: 50px;
}

.cal-event:hover .cal-new{
    background: var(--White);
    color: var(--Purple);
    transition: background 400ms;
}