.month-grid-wrapper {
  display: flex;
  flex-direction: column;

  gap: var(--gap-between-tiles);

  height: 100%;
  overflow: hidden;
}

.month-grid-wrapper .day-labels {
  flex: 0;

  padding: var(--content-padding);
  padding-bottom: 0px;
}

.month-grid-wrapper > div {
  display: grid;
  gap: var(--gap-between-tiles);

  height: 100%;

  animation: slide-up var(--animation-duration);

  grid-template-columns: repeat(7, minmax(0px, 1fr));
  grid-auto-rows: 1fr;
}

.month-grid {
  overflow: hidden;

  padding: var(--content-padding);
  padding-top: 0px;
}

.month-grid .tile {
  animation: slide-up var(--animation-duration);
  overflow: hidden;
}

.month-grid .tile[today] b {
  color: var(--primary);
}

.month-grid .tile > div {
  display: flex;
  flex-direction: column;

  height: 100%;
  width: 100%;
}
.month-grid .tile > div span {
  animation: slide-up var(--animation-duration);
}

@media (max-width: 640px) {
  .month-grid .tile {
    padding: 4px;
  }
}