.upcomingWrapper {
  background: var(--color-deepBrick);
  color: var(--color-goldenBeige);
  margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
  padding: var(--spacing-s) var(--spacing-sitepadding-inline);
  position: relative;
  overflow-x: hidden;

  header {
    position: relative;
    z-index: 10;
  }

  h2 {
    margin-bottom: var(--spacing-xs);
  }

  &:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(90deg, transparent, var(--color-deepBrick));
    pointer-events: none;
  }
}

.eventList {
  --size-item-width: 20rem;
  margin-bottom: var(--spacing-xs);
  list-style: none;
  display: flex;
  width: calc(var(--size-item-width) * 10);
  position: relative;

  ul {
    display: flex;
  }

  li {
    padding-right: var(--spacing-s);
  }
}