.month {
  margin-bottom: 4rem;
}

.weekday-header {
  text-align: center;
}

.weekday-header,
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.day {
  padding: 0.75rem;
  margin: 0.25rem;
  text-align: center;
  border-radius: 6px;
}

.day.event {
  background: oklch(49.165% 0.15758 25.087 / 0.788);
  color: white;
  font-weight: 600;
}

.day.muted {
  opacity: 0.35;
}

@media only screen and (max-width: 600px) {
  .wide {
    display: none;
  }
}
@media only screen and (min-width: 600px) {
  .narrow {
    display: none;
  }
}