.availability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.availability-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 250, 243, 0.85);
  border: 1px solid rgba(40, 89, 67, 0.1);
}

.availability-pie {
  --availability-angle: 0deg;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: conic-gradient(var(--accent) 0deg var(--availability-angle), rgba(216, 207, 191, 0.55) var(--availability-angle) 360deg);
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
}

.availability-pie::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 999px;
  background: #fffaf3;
}

.availability-pie span {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: var(--accent-strong);
}

.maintenance-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}