.label-pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  height: clamp(25px, calc(23.89px + 0.286vw), 28px);
  padding-inline: 10.5px;
  border-radius: var(--radius-label);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Myfont Coool', var(--font-primary);
  font-size: var(--font-size-label-accent);
  line-height: 1;
  white-space: nowrap;
}

.label-pill--l,
.label-pill--m {
  height: clamp(26px, calc(19.454px + 0.93514vw), 32.92px);
  padding-inline: clamp(12.916px, calc(16.971px + -0.28162vw), 15px);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(12px, calc(8.216px + 0.54054vw), 16px);
}

.label-pill--s {
  height: clamp(21px, calc(19.108px + 0.27027vw), 23px);
  padding-inline: 10px;
  background: var(--color-accent);
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(10px, calc(8.108px + 0.27027vw), 12px);
}

/* Teachers' and Courses' small pill: the frame's 12px/25px badge. */
.label-pill--xs {
  height: auto;
  padding: 4px 15px;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: clamp(12px, calc(10.108px + 0.27027vw), 14px);
  line-height: normal;
}