@media (max-width: 760px) {
  .calendar-card {
    padding: 18px 12px 12px;
  }

  .calendar-header {
    margin-bottom: 14px;
  }

  .weekdays {
    border: 0;
    padding: 0 4px 7px;
  }

  .calendar {
    grid-auto-rows: 52px;
    gap: 3px;
    padding: 0 2px;
  }

  .calendar-day,
  .calendar-day:nth-child(7n) {
    border: 0;
    border-radius: 10px;
    background: #f5f7f4;
    padding: 5px;
  }

  .calendar-day.outside {
    background: transparent;
    opacity: .24;
  }

  .calendar-day:hover,
  .calendar-day.selected {
    background: #e9f1e8;
    box-shadow: inset 0 0 0 1px #c9ddca;
  }

  .calendar-day.has-payment {
    background: #eef9ee;
    box-shadow: inset 0 0 0 1px #d3ead5;
  }

  .calendar-day.has-payment.selected {
    background: #e0f3e1;
    box-shadow: inset 0 0 0 2px #61a971;
  }

  .calendar-day .date-number {
    width: 22px;
    height: 22px;
    border-radius: 8px;
  }

  .calendar-day.has-payment .payment-chip {
    margin: 4px 0 0 3px;
  }

  .calendar-day .more-payments {
    margin: 2px 0 0 3px;
  }
}

@media (max-width: 360px) {
  .calendar {
    grid-auto-rows: 47px;
    gap: 2px;
  }
}