.contribution-card {
  --cell-size: 14px;
  --cell-gap: 4px;
}

.contribution-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.contribution-grid {
  display: grid;
  gap: 12px;
  width: max-content;
}

.month-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--cell-size);
  gap: var(--cell-gap);
  align-items: end;
  min-height: 16px;
}

.month-label {
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.weeks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--cell-size);
  gap: var(--cell-gap);
}

.week {
  display: grid;
  grid-template-rows: repeat(7, var(--cell-size));
  gap: var(--cell-gap);
}

.day {
  width: var(--cell-size);
  height: var(--cell-size);
  border-radius: 3px;
  background: #e9ecef;
}

.day.level-0 {
  background: #e9ecef;
}

.day.level-1 {
  background: #cfe2ff;
}

.day.level-2 {
  background: #9ec5fe;
}

.day.level-3 {
  background: #6ea8fe;
}

.day.level-4 {
  background: #3d7bfd;
}

.day.is-outside {
  opacity: 0.4;
}

@media (max-width: 720px) {
  .contribution-card {
    --cell-size: 12px;
    --cell-gap: 3px;
  }
}