div.secretariat-calendar-events{
    display: grid; grid-gap: 8px;
    grid-template-columns: repeat(auto-fill,min(100%,230px));
    --saturation: 0%;
}

a.secretariat-calendar-event{
    display: flex; cursor: pointer; padding: 4px; gap: 4px;
    border: 1px solid hsla(0, 0%, 70%, 0.2); overflow: hidden;
    color: hsl(var(--hue),var(--saturation),40%);
}

a.secretariat-calendar-event:hover{
    background-color: hsl(var(--hue),var(--saturation),95%); 
    color: hsl(var(--hue),var(--saturation),30%);
    border: 1px solid hsla(0, 0%, 70%, 0.5);
}

div.secretariat-calendar-event--icon{
    width: 40px; height: 40px; display: block;
	background-size: cover; overflow: hidden;
	background-position: center center;
	text-align: center; font-size: 32px; line-height: 40px;
    color: hsl(var(--hue),var(--saturation),50%); flex-shrink: 0;
}

div.secretariat-calendar-event--right{
    display: flex; width: 0; flex-grow: 1; flex-wrap: wrap; gap: 4px;
    flex-direction: column;
}