.event-calendar-headline {
  grid-column: 3 / span 10;
}

.event-calendar-inner {
  grid-column: 3 / span 10;
  background-color: var(--white);
  padding: 1em;
}

.event-calendar-hidden-items {
  display: none;
}

.event-calendar-controls {
  grid-column: 3 / span 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-sm);
}

.event-calendar-view-switcher-btn {
  background-color: var(--yellow);
  color: var(--white);
}

.event-calendar-view-switcher-btn.active {
  background-color: var(--red);
}

@media (max-width: 1199.98px) {
  .event-calendar-inner,
  .event-calendar-headline,
  .event-calendar-controls {
    grid-column: 2 / span 12;
  }
}

@media (max-width: 767.98px) {
  .event-calendar-inner {
    grid-column: 1 / span 14;
    padding: 0.5em;
  }
}

@media (max-width: 575.98px) {
  .event-calendar-controls {
    flex-direction: column;
    gap: 1em;
    align-items: center;
  }

  .event-calendar-filter-wrapper {
    display: flex;
    flex-direction: column;
  }
}