#event-calendar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem; /* adjust spacing as needed */  
  margin: 0 auto; /* center on page */
  padding: 1rem;
}

#event-calendar h4 {
  margin-bottom:0;
}

.event {
  padding: 1rem;  
}

.event-date {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.5rem;
}

.event-year {
  color: #777;
  font-size: 0.9em;
  margin-left: 0.3rem;
}

.event-summary {
  font-size: 1rem;
}

.event-fee {
  display: block;
  margin-top: 0.5rem;
  font-weight: 500;
}

button.register-btn,
input[type=button].register-btn {
  background-color: #3465c8;
}

.time-span {
  font-weight: 500;
  margin-left: 8px;
  font-size: .85em;
  font-style: italic;
}

@media (max-width: 767px) {
  #event-calendar {
    grid-template-columns: 1fr;
  }
}