.calendar {
  width: 250px;
  font-family: Arial, sans-serif;
}

.day-headers,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.day-headers {
  margin-bottom: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #777;
}

.calendar-grid {
  grid-template-rows: repeat(4, 28px);
}

.calendar-grid > div {
  background: #f1f3f5;
  border-radius: 4px;
}