.events-menu {
  padding-top: var(--top);
  display: flex;
  justify-content: center; }
  .events-menu .inner {
    display: flex;
    align-items: center;
    gap: 27px; }
    .events-menu .inner .line {
      background-color: var(--fg);
      width: 1px;
      height: 60%; }
    .events-menu .inner button {
      opacity: 50%; }
      .events-menu .inner button.active {
        opacity: 100%; }
  @media (max-width: 960px) {
    .events-menu {
      padding-top: 0; }
      .events-menu .inner {
        gap: 20px; }
        .events-menu .inner button {
          font-size: 37px; } }
.events {
  padding-top: 156px;
  padding-bottom: 172px;
  display: flex;
  flex-direction: column;
  gap: 24px; }
  .events .event .left {
    grid-column: 1/13;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    .events .event .left .text {
      display: flex; }
      .events .event .left .text .details {
        width: 30%;
        min-width: 220px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px; }
  .events .event .right {
    grid-column: 17/25; }
  .events .event.past-event {
    display: none; }
    .events .event.past-event .where, .events .event.past-event .djs, .events .event.past-event .writeup, .events .event.past-event .cost, .events .event.past-event .when-title {
      display: none; }
    .events .event.past-event .left {
      justify-content: end; }
      .events .event.past-event .left h4 {
        padding-bottom: 16px; }
    .events .event.past-event .right {
      grid-column: 21/25; }
  .events .line {
    border-top: 1px solid rgba(80, 14, 8, 0.25);
    grid-column: 1/-1; }
  .events[data-showing="past-events"] .event.upcoming-event {
    display: none; }
  .events[data-showing="past-events"] .event.past-event {
    display: grid; }
  @media (max-width: 960px) {
    .events {
      padding-top: 60px; }
      .events .event {
        row-gap: 24px; }
        .events .event .left, .events .event .right {
          grid-column: 1/-1; }
        .events .event .left {
          gap: 10px; }
          .events .event .left .text {
            flex-direction: column;
            gap: 10px; }
      .events .event.past-event .right {
        grid-column: 1/6; } }