.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, footer {
    position: relative;
    z-index: 10;
  }

  footer, footer a {
    margin-top: 0;
  }

  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;
  }
}

.upcomingContent {
  margin: 0 calc(var(--spacing-sitepadding-inline)*-1);
  padding: 0 var(--spacing-sitepadding-inline);
  overflow-x: scroll;

  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

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

  ul {
    display: flex;
  }
}

@media (max-width: 800px) {
  .upcomingContent {
    margin-top: var(--spacing-s);
  }
}