.bounty-board {
  --gray-50: 210, 40%, 98%;
  --gray-100: 210, 40%, 96%;
  --gray-200: 214, 32%, 91%;
  --gray-300: 213, 27%, 84%;
  --gray-400: 215, 20%, 65%;
  --gray-500: 215, 16%, 47%;
  --gray-600: 215, 19%, 35%;
  --gray-700: 215, 25%, 27%;
  --gray-800: 217, 33%, 17%;
  --gray-900: 222, 47%, 11%;
  --gray-950: 229, 84%, 5%;

  --accent-50: var(--gray-50);
  --accent-100: var(--gray-100);
  --accent-200: var(--gray-200);
  --accent-300: var(--gray-300);
  --accent-400: var(--gray-400);
  --accent-500: var(--gray-500);
  --accent-600: var(--gray-600);
  --accent-700: var(--gray-700);
  --accent-800: var(--gray-800);
  --accent-900: var(--gray-900);
  --accent-950: var(--gray-950);

  --green-50: 152, 81%, 96%;
  --green-100: 149, 80%, 90%;
  --green-200: 152, 76%, 80%;
  --green-300: 156, 72%, 67%;
  --green-400: 158, 64%, 52%;
  --green-500: 160, 84%, 39%;
  --green-600: 161, 94%, 30%;
  --green-700: 163, 94%, 24%;
  --green-800: 163, 88%, 20%;
  --green-900: 164, 86%, 16%;
  --green-950: 166, 91%, 9%;
}

.bounty-board {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
}

@media (min-width: 640px) {
  .bounty-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@keyframes bounty-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.bounty-board {
  --gradient-to: hsla(var(--accent-400), 0.4);
  --gradient-from: hsla(var(--accent-400), 0.2);
  --gradient-stops: var(--gradient-from), hsla(var(--accent-400), 0.3),
    var(--gradient-to);
}

.bounty-board.dark {
  --gradient-to: hsla(var(--accent-600), 0.2);
  --gradient-from: hsla(var(--accent-600), 0.3);
  --gradient-stops: var(--gradient-from), hsla(var(--accent-600), 0.4),
    var(--gradient-to);
}

.bounty-board .bounty-card {
  text-decoration-line: none;
  display: block;
  position: relative;
  border-radius: 0.5rem;
  border-width: 1px;
  height: 100%;
  background-image: linear-gradient(to bottom right, var(--gradient-stops));
}

.bounty-board .bounty-card *,
.bounty-board .bounty-skeleton * {
  transition-property: background-color, color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.bounty-board .bounty-card:hover {
  border-color: hsl(var(--gray-400));
}

.bounty-board .bounty-card .bounty-content {
  position: relative;
  padding: 1rem;
  height: 100%;
}

.bounty-board .bounty-card .bounty-reward {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--green-500));
}

.bounty-board .bounty-card .bounty-issue {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--gray-700));
}

.bounty-board .bounty-card .bounty-title {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  line-height: 1.25;
  color: hsl(var(--gray-800));
  overflow-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp);
}

.bounty-board.dark .bounty-card .bounty-reward {
  color: hsl(var(--green-400));
}

.bounty-board.dark .bounty-card .bounty-issue {
  color: hsl(var(--accent-200));
}

.bounty-board.dark .bounty-card .bounty-title {
  color: hsl(var(--accent-50));
}

.bounty-board .bounty-card:hover {
  background-color: hsla(var(--gray-300), 0.1);
  border-color: hsl(var(--gray-400));
}

.bounty-board .bounty-card:hover .bounty-reward {
  color: hsl(var(--green-600));
}

.bounty-board .bounty-card:hover .bounty-issue {
  color: hsl(var(--gray-800));
}

.bounty-board .bounty-card:hover .bounty-title {
  color: hsl(var(--gray-900));
}

.bounty-board.dark .bounty-card:hover {
  background-color: hsla(var(--gray-600), 0.05);
  border-color: hsl(var(--accent-500));
}

.bounty-board.dark .bounty-card:hover .bounty-reward {
  color: hsl(var(--green-300));
}

.bounty-board.dark .bounty-card:hover .bounty-issue {
  color: hsl(var(--accent-100));
}

.bounty-board.dark .bounty-card:hover .bounty-title {
  color: white;
}

.bounty-board .bounty-skeleton {
  border-radius: 0.5rem;
  background-color: hsl(var(--gray-200));
  animation: bounty-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  height: 122px;
}

.bounty-board.dark .bounty-skeleton {
  background-color: hsl(var(--gray-800));
}

.bounty-board .bounty-skeleton .bounty-content {
  position: relative;
  padding: 1rem;
  height: 100%;
}

.bounty-board .bounty-skeleton .bounty-reward {
  margin-top: 0.25rem;
  border-radius: 0.375rem;
  height: 25px;
  width: 59px;
  background-color: hsl(var(--gray-300));
}

.bounty-board .bounty-skeleton .bounty-issue {
  margin-top: 0.625rem;
  border-radius: 0.375rem;
  height: 14px;
  width: 86px;
  background-color: hsl(var(--gray-300));
}

.bounty-board .bounty-skeleton .bounty-title {
  margin-top: 1rem;
  border-radius: 0.375rem;
  height: 20px;
  background-color: hsl(var(--gray-300));
}

.bounty-board.dark .bounty-skeleton .bounty-reward {
  background-color: hsl(var(--gray-700));
}

.bounty-board.dark .bounty-skeleton .bounty-issue {
  background-color: hsl(var(--gray-700));
}

.bounty-board.dark .bounty-skeleton .bounty-title {
  background-color: hsl(var(--gray-700));
}