<div class="card-container">
  <div class="progress-card" style="--progress:40%;">
    <h4>Collect 5 Boar meat</h4>
    <p>In progress: 2 of 5</p>
  </div>

  <div class="progress-card" style="--progress:20%">
    <h4>Collect 5 pieces of Firewood</h4>
    <p>In progress: 1 of 5</p>
  </div>

  <div class="progress-card" style="--progress:86%">
    <h4>Collect 7 Raptor feathers</h4>
    <p>In progress: 6 of 7</p>
  </div>

  <div class="progress-card" style="--progress:60%">
    <h4>Collect five Iron ore</h4>
    <p>In progress: 6 of 10</p>
  </div>
</div>

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem;
}
.progress-card {
  width: 30ch;
  padding: 2rem;
  border-radius: 5px;
  border: solid 1px #f1f1f1;
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.5), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
  color: #6c3d3d;
  --progress-total: #faebd1;
  --progress-indicator: #65ad60;
  --progress-indicator-height: 10%;
  --progress-card-background: #ffdc9b;
  background: linear-gradient(
        to right,
        var(--progress-indicator) 0,
        var(--progress-indicator) var(--progress, 30%),
        var(--progress-total) var(--progress, 30%),
        var(--progress-total) 100%
      ) no-repeat 0 0/100% var(--progress-indicator-height), var(
        --progress-card-background
      ) no-repeat 0 0/100%;
}

p {
  font-weight: 600;
  font-style: italic;
}