.medium-list-item a.row.medium-list-link, .medium-list-item .text, .medium-list-number {
  transition: font-variation-settings .8s ease-in-out, color .8s ease-in-out;
  font-variation-settings: 'wght' 600, 'wdth' 100;
  font-family: var(--font-family-heading);
}

.medium-list-item .num {
  font-size: var(--font-size-20);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold-heading);
  margin-right: 1.5rem;
}

.medium-list-item .text {
  font-size: var(--font-size-50);
  font-family: var(--font-family-heading);
  text-transform: uppercase;
  line-height: 1;
}

.medium-list-item ul {
  padding: 0;
  margin: 0;
  list-style: none;

}

.medium-list-item a {
  text-decoration: none;
}

.medium-list-item-row.row {
  transition: color .5s ease-in-out, font-variation-settings .5s ease-in-out;
  font-variation-settings: "wght" 600, "wdth" 100;
  font-variation-settings: 'wght' 800, 'wdth' 110;
  font-weight: unset;
  display: flex;
  align-items: center;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.medium-list-item-row.row .medium-list-item-text, .medium-list-item-row.row .medium-list-number {
  font-variation-settings: 'wght' 800, 'wdth' 110; 
}
.medium-list-item-row.row:hover .medium-list-item-text, .medium-list-item-row.row:hover .medium-list-number {
  color: var(--color-primary);
  font-variation-settings: 'wght' 800, 'wdth' 110; 
}



.medium-list-number {
  font-size: var(--font-size-20);
  margin-right: 1.5rem;
  margin-bottom: 0.5em;
}

.medium-list-item-text.text {
  --tw-space-x-reverse: 0;
  margin-right: calc(.75rem* var(--tw-space-x-reverse));
  margin-left: calc(.75rem* calc(1 - var(--tw-space-x-reverse)));
  line-height; 1;
}

.medium-list-item .arrow {
  transform: translateX(0);
  transition: transform 0.5s ease;
  margin-top: -10px;
  --tw-space-x-reverse: 0;
  margin-right: calc(.75rem* var(--tw-space-x-reverse));
  margin-left: calc(.75rem* calc(1 - var(--tw-space-x-reverse)));
}

.medium-list-item-row.row:hover span.arrow {
  transform: translateX(1.3rem);

}


@media (max-width: 450px) {
  .medium-list-item .text {
    font-size: var(--font-size-30);
  }

  .medium-list-number {
    margin-right: .3rem;
    min-width: 25px;
  }
}