:root {
  --datdrop: #f7c66c;
  --luxdrop: #c4a7ff;
}

.summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.modal-summary,
.session-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metric.datdrop,
.summary-grid article:nth-child(2) strong,
.modal-summary > div:nth-child(2) strong,
.session-metrics > div:nth-child(2) strong {
  color: var(--datdrop);
}

.metric.luxdrop,
.summary-grid article:nth-child(3) strong,
.modal-summary > div:nth-child(3) strong,
.session-metrics > div:nth-child(3) strong {
  color: var(--luxdrop);
}

@media (max-width: 900px) {
  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .summary-grid,
  .modal-summary,
  .session-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.toolbar #previous-month,
.toolbar #next-month {
  width: auto;
  min-width: 92px;
  padding-inline: 14px;
  white-space: nowrap;
}