.spsc-on-this-day-overview {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1.25rem, 1fr));
  grid-auto-rows: 1fr;
  gap: 0.125rem;
}

.spsc-on-this-day-overview-day  {
  display: block;
  aspect-ratio: 1/1;
  background: var(--red);
}

a.spsc-on-this-day-overview-day:hover,
a.spsc-on-this-day-overview-day:focus {
  background: var(--yellow);
  border: 2px solid black;
  outline: none;
}

.spsc-on-this-day-overview-today {
  background: var(--yellow);
  border: 2px solid black;
}

.spsc-on-this-day-tooltip {
  position: absolute;
  background: var(--yellow);
  color: black;
  padding: 0.25rem 0.5rem;
  transform: translate(-50%, -100%);
  font-size: 1rem;
  white-space: nowrap;
  z-index: 9999;
}

@media (min-width: 1024px) {

  .spsc-on-this-day-overview {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.125rem;
    aspect-ratio: 7/1;
  }

  .spsc-on-this-day-overview-day  {
    width: 1rem;
    height: 1rem;
    aspect-ratio: 1/1;
  }
}