body {
   font-family: Noto Sans, sans-serif;
   background-color: #fdfdff;
}
.month {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-gap: 0.35em;
   justify-items: center;
   margin: 1em;
   max-width: 800px;
}
.day {
   background: #fff;
   border: 1px solid rgba(0,0,0,0.2);
   width: 100%;
   border-radius: .5em;
   text-align: center;
   align-content: start;
   aspect-ratio: 1;
   cursor: pointer;

   display: grid;
   grid-template-areas: "weekday daynum" "attendance attendance";
   grid-template-rows: 1fr 2fr;
}
   .day > * {
      padding: .5rem;
   }
      .day .weekday {
         grid-area: weekday;
         text-align: left;
         align-self: start;
         opacity: 0.8;
      }
      .day .daynum {
         grid-area: daynum;
         text-align: right;
         font-weight: 500;
         font-size: 120%;
         margin-top: -.1rem;
      }
      .day .attendance {
         grid-area: attendance;
         background-color: #ddd;
         height: auto;
         font-size: 200%;
      }
   .day.user-free {
      background: #daf2da;
   }
@media screen and (min-width:800px) {
   .month {
      grid-gap: 0.75em;
      margin: 2em auto;
      padding-inline: 2em;
   }
}