section.calendar {
  display: grid;
  width: 95%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: .3rem;
}

section.calendar >*{
    text-align: center;
    border: solid 1px gray;
    border-radius: 0 0 0 12px;
}
div.last-month,
 div.next-month{
    background-color: hsla( from gray h s l / .2);
    color: var(--pico-color)
}

section.button-section{
  width: 10rem;
    place-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem
}

div.selected{
    border: solid 5px var(--pico-color-red-500);
    background-color:  transparent;
    color: var(--pico-color-red-100);
}

div.calendar-day{
  display: grid;
  grid-template-columns: 1fr 1fr ;
  align-items: center;
  height: 5rem;
}

div.calendar-day > i{
  color: var(--pico-color-red-500);
  font-size: 2rem;
}

/* 
section.calendar > *:nth-child(-n + 7) {
  opacity: 0.3;
}
section.calendar > *:nth-child(n + 8):nth-child(-n+14) {
  opacity: 0.6;
}
section.calendar > *:nth-last-child(-n + 7) {
  opacity: 0.3;
}
section.calendar > *:nth-last-child(n + 8):nth-last-child(-n+14) {
  opacity: 0.6;
}
 */