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

.dashboardStatusCard {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dashboardStatusCard:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(22, 49, 46, 0.1);
}

.dashboardStatusCard:focus-visible {
  outline: 3px solid rgba(23, 105, 95, 0.28);
  outline-offset: 2px;
}

.dashboardStatusCard.all {
  background: #faf9f5;
  border-color: #dedbd2;
  color: #101828;
}

.dashboardStatusCard.expired {
  background: #9b1c1c;
  border-color: #9b1c1c;
  color: #ffffff;
}

.dashboardStatusCard.soon {
  background: #9a5b00;
  border-color: #9a5b00;
  color: #ffffff;
}

.dashboardStatusCard.ok {
  background: #087443;
  border-color: #087443;
  color: #ffffff;
}

.dashboardStatusCard.removed {
  background: #30343b;
  border-color: #30343b;
  color: #ffffff;
}

.dashboardStatusCard span,
.dashboardStatusCard strong {
  color: inherit;
}

@media (max-width: 980px) {
  #summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #summary {
    grid-template-columns: 1fr;
  }
}