.calendar-body{
  display: flex;
  flex-direction: column;
  height: 100px;
background-color: brown;
}

.cal-header{
  flex: 1;
  display: flex;
background-color: green;
}

.cal-weeks{
 flex: 1;
 display: flex;
background-color: blue;
}

.cal-dates{
   flex: 4;
  background-color: plum;
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 columns */
  grid-template-rows: repeat(4, 1fr);    /* 4 rows */
  gap: 5px;                              /* spacing between boxes */
}

.cal-dates .day {
  background-color: lightblue;
  display: flex;           /* center content */
   aspect-ratio: 1 / 1;           /* fixed height for each box */
}