.event-section {
  margin-block-start: var(--spacing-section);

  summary {
    user-select: none;
    list-style: none;
    display: flex;
    gap: var(--spacing-s);
    align-items: center;

    h2 span {
      font-size: var(--font-text);
      color: var(--color-muted);
    }

    svg {
      transition: transform .1s ease-out;
    }
  }

  summary::-webkit-details-marker {
    display: none;
  }

  ul {
    list-style: none;
    padding: 0;
    margin-block-start: var(--spacing-m);
    display: flex;
    gap: 1.25rem;

    li {
      display: block;
      width: calc(95vw - 2 * var(--page-padding-x));
      flex-shrink: 0;
    }

    &:not(:has(> :only-child)) {
      margin-inline-end: calc(50% - 50vw);
      padding-inline-end: 1.25rem;
      padding-block-end: var(--spacing-m);
      overflow-x: auto;

    }

    li:only-child {
      width: 100%;
    }

  }

  &[open] {
    summary svg {
      transform: rotate(90deg);
    }
  }

  &:not([open])+& {
    margin-block-start: var(--spacing-m);
  }
}


@media (min-width: 768px) {
  .event-section {
    ul {
      display: grid;
      inline-size: auto;
      grid-template-columns: repeat(2, 1fr);
      margin-inline-end: 0 !important;
      padding-inline-end: 0 !important;
      width: 100%;

      li {
        width: 100%;
      }
    }
  }
}


@media (min-width: 1200px) {
  .event-section {
    ul {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}