/* -- The root styles must go in the element of the structure with the name "Hero" (Section). --*/

.hero-94__list-item{
  counter-increment: item;

  /* -- Counter styles -- */
  /* In "content" of the pseudo-element, "decimal-leading-zero" is used so that it has a 0 in each number */
  .card-hero-94__counter-wrapper{
    &:before{
      content: counter(item, decimal-leading-zero);
    }
  }


  /* Styles for odd cards*/
  &:nth-of-type(odd){
    transform: rotate(10deg);

    @media (max-width: 991px) {
      transform: none;
    }
  }

  /* Styles for even cards*/
  &:nth-of-type(even){
    transform: rotate(-10deg);

    @media (max-width: 991px) {
      transform: none;
    }
  }

  /* Card styles in hover and focus mode */
  .card-hero-94{
    &:hover, &:focus-within{
      transform: translateY(-3rem);
      border-color: var(--neutral);
    }
  }
}