section.inTrainer
  @include spaceSection
  .container
    align-items: flex-start
    @media (min-width: 1024px)
      flex-direction: row
      gap: 0 8%
      justify-content: flex-start
  .container .backTrainers
    margin-bottom: 2rem
    justify-content: flex-start
    @media (min-width: 1024px)
      margin: 0
    @media (min-width: 1280px)
      &:hover
        span
          text-decoration: underline
    a
      align-items: center
      gap: 0 .5rem
      span
        color: $black
  .container .infoTrainer
    width: 100%
    align-items: center
    gap: 1rem 0
    padding: 2rem
    background-color: $black
    border-radius: 20px
    margin-bottom: 2rem
    @media (min-width: 1024px)
      width: 40%
      margin: 0
    @media (min-width: 1280px)
      width: 30%
      padding: 3rem
      position: sticky
      top: 120px
    @media (min-width: 1600px)
      width: 28%
    @media (min-width: 1900px)
      width: 25%
    h2, p
      color: $white
    h2
      //text-transform: uppercase
      @media (min-width: 1024px)
        font-size: 24px
      @media (min-width: 1280px)
        font-size: 26px
      @media (min-width: 1600px)
        font-size: 28px
    .moreText
      color: $yellow
      @media (min-width: 1024px)
        display: none
    .textReveal
      color: $white
      @media (min-width: 1024px)
        display: inline-flex
      @media (min-width: 1900px)
        font-size: 18px
  .container .listCourses
    width: 100%
    align-items: flex-start
    gap: 1rem
    @media (min-width: 1024px)
      gap: 1.2rem
      width: 40%
    @media (min-width: 1280px)
      gap: 2rem
      width: 45%
    @media (min-width: 1440px)
      width: 40%
    .item
      width: 100%
      border: 1px solid $black
      border-radius: 10px
      overflow: hidden
      @media (min-width: 1280px)
        gap: 0 1rem
        padding: 1.5rem
    .title
      padding: 2rem 1rem
      align-items: flex-start
      h3
        padding-right: 3rem
        //text-transform: uppercase
        @media (min-width: 1024px)
          font-size: 20px
        @media (min-width: 1280px)
          font-size: 22px
        @media (min-width: 1600px)
          font-size: 24px
      @media (min-width: 1280px)
        justify-content: space-between
        padding: 0
        img
          display: block
          width: 150px
          aspect-ratio: 1/1
          object-fit: cover
    .info .accTittle
      position: absolute
      top: -3rem
      right: 1rem
      transform: translateY(-50%)
      transition: transform .2s
      @media (min-width: 1280px)
        left: 0
        top: -1.5rem
        cursor: pointer
    .info .rotateImg
      transform: translateY(-50%) rotate(180deg)
      circle
        fill: $black
      path
        fill: $yellow
    .accContent  
      display: none
    .openedContent
      display: block
      background-color: $black
      padding: 1rem
      @media (min-width: 1280px)
        padding: 1.5rem
        border-radius: 10px
        margin-top: 1.2rem
      p
        color: $white