[data-custom-section="calendar-list"] {margin:40px 0px;}
[data-custom-section="calendar-list"] .section-wrapper {display:flex;flex-direction: column;gap:40px;}
[data-custom-section="calendar-list"] .section-wrapper .text-details {text-align:center;max-width:800px;margin:auto;display:flex;flex-direction:column;gap:10px;}
[data-custom-section="calendar-list"] .section-wrapper .text-details .heading {font-size:25px;font-weight:bold;}
[data-custom-section="calendar-list"] .no-entries {padding:60px 20px;text-align:center;font-size:20px;font-weight:bold;}
[data-custom-section="calendar-list"] .calendar-list {display:flex;flex-direction:column;gap:20px;}
[data-custom-section="calendar-list"] .calendar-list .month {display:flex;flex-direction:column;gap:20px;}
[data-custom-section="calendar-list"] .calendar-list .month .events {display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;}
[data-custom-section="calendar-list"] .calendar-list .month .heading {background-color:var(--darkBlue);color:var(--darkBlueText);padding:10px 20px;border-radius:8px;font-weight:600;font-size:16px;}
[data-custom-section="calendar-list"] .event-item {text-decoration: none;color:inherit;display:flex;flex-direction:column;gap:10px;}
[data-custom-section="calendar-list"] .event-item::after {content:'';width:100%;height:1px;background-color:var(--black);margin-top:auto;}
[data-custom-section="calendar-list"] .event-item .image-wrapper {border-radius:10px;overflow:hidden;position:relative;border:1px solid #eee;aspect-ratio: 800/500;background-color:var(--grey);}
[data-custom-section="calendar-list"] .event-item .dates {font-size:14px;font-weight:300;margin-bottom:5px;}
[data-custom-section="calendar-list"] .event-item .title {font-size:17px;font-weight:600;margin-bottom:5px;}
[data-custom-section="calendar-list"] .event-item .description {display:-webkit-box;-webkit-box-orient: vertical;overflow-wrap:anywhere;text-overflow:ellipsis;overflow:hidden;font-size:14px;-webkit-line-clamp:2;line-clamp:2;}

@media (max-width:1200px)
{
    [data-custom-section="calendar-list"] .calendar-list .month .events {grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:500px)
{
    [data-custom-section="calendar-list"] .calendar-list .month .events {grid-template-columns:1fr;}
}