.card-header {
  height: 192px;
  position: relative;
}
.card-header img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.card-header .img-potrait {
  object-fit: fill;
}
.card-header .wraper-header {
  position: relative;
}

.learn-progress .bar {
  height: 4px;
  background: var(--m-3-sys-light-secondary-fixed-dim);
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
}
.learn-progress .bar .value {
  height: 4px;
  background: var(--primary);
}
.learn-progress.completed .text-value {
  background: var(--m3-semantic-success-50) !important;
}
.learn-progress.banner {
  max-width: 512px;
}
.learn-progress.banner .bar {
  background: var(--white-secondary);
}
.learn-progress.banner .bar .value {
  background: var(--m-3-sys-light-primary-container);
}

.assesment-score {
  background: var(--m-3-state-layers-light-on-secondary-container-opacity-012);
  color: var(--m-3-sys-light-on-secondary-container);
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  padding: 8px;
  margin-top: auto;
}