:where(.events-accordion-list *:not(.events-accordion-list__details__content *)) {
    margin-top: 0;
}

.events-accordion-list {
    --event-table-columns: 14.375rem 1fr 1fr 3.75rem;
    container: events / inline-size;
    interpolate-size: allow-keywords;
}

.events-accordion-list__legend {
    display: grid;
    gap: 1.25rem 0;
    grid-template-columns: var(--event-table-columns);
    background-color: var(--color-black);
    color: var(--color-white);
}

    .events-accordion-list__legend > * {
        padding-inline-start: 1.25rem;
        padding-block: 0.625rem;
        font-weight: 700;
    }

.events-accordion-list__details {
    padding-block: 1.25rem;
    padding-inline: 1.25rem;
    border-block-start: solid 1px currentColor;
}

    .events-accordion-list__details:last-child {
        border-block-end: solid 1px currentColor;
    }

.events-accordion-list__details__summary {
    list-style: none;
    display: grid;
    gap: 0.25rem 0;
    grid-template-columns: var(--event-table-columns);
    cursor: pointer;
}

    .events-accordion-list__details__summary > * {
        padding-inline-start: 1.25rem;
        text-wrap: pretty;
        transition: opacity 0.25s ease-in-out;
    }

    .events-accordion-list__details__summary:has(:hover) > *:not(:last-child) {
        opacity: 0.7;
    }

.events-accordion-list__details__summary__cal {
    transition: color 0.2s ease-in-out;
}

    .events-accordion-list__details__summary__cal:hover {
        color: var(--color-black);
    }

    .events-accordion-list__details__summary__cal svg {
        width: 1.5rem;
    }

@media (width < 37.5rem) {
    .events-accordion-list {
        --event-table-columns: 200px 1fr 60px;
    }

    .events-accordion-list__legend {
        display: none;
    }


    .events-accordion-list__details__summary > :nth-child(3) {
        grid-row: 2;
        grid-column: 2;
    }
}

@media (width < 30rem) {
    .events-accordion-list {
        --event-table-columns: 1fr;
    }

    .events-accordion-list__details__summary > :nth-child(3) {
        grid-row: auto;
        grid-column: auto;
    }
}