section.trainers
  @include spaceSection
  .container
    align-items: flex-start
    border-radius: 30px
    box-shadow: 0px 4px 6px 0px rgba(50,50,93,0.11) , 0px 1px 3px 0px rgba(0,0,0,0.08) 
    padding: 2rem 1.5rem
    h1
      //text-transform: uppercase
      margin-bottom: .5rem
      @media (min-width: 1024px)
        font-size: 26px
      @media (min-width: 1440px)
        font-size: 28px
      @media (min-width: 1600px)
        font-size: 30px
    &>p
      margin-bottom: 2rem
    @media (min-width: 768px)
      padding: 3rem
      &>p
        width: 50%
        margin-bottom: 4rem
    @media (min-width: 1280px)
      padding: 4rem
      width: 75%
    @media (min-width: 1440px)
      padding: 5rem
      width: 70%
    .trainerList
      width: 100%
      gap: 2rem 0
      @media (min-width: 1024px)
        gap: 2.5rem 0
    .trainerList .item
      align-items: center
      border-bottom: 1px solid $black
      padding-bottom: 1.5rem
      gap: 1rem 0
      @media (min-width: 768px)
        flex-direction: row
        justify-content: space-between
        gap: 0
      .info
        gap: 1rem 0
        align-items: center
        @media (min-width: 768px)
          flex-direction: row
          gap: 0 1rem
        @media (min-width: 1024px)
          gap: 0 1.5rem
        img 
          width: 70px
          height: 70px
          border: 1px solid #afafaf
          border-radius: 100%
        .text
          align-items: center
          gap: .5rem 0
          h3
            //text-transform: uppercase
          p
            text-align: center
          @media (min-width: 768px)
            align-items: flex-start
            p
              text-align: left
              width: 75%
      a
        justify-content: center
        align-items: center
        gap: 0 .5rem
        background: $black
        border: 1px solid $black
        padding: .8rem 1.5rem
        border-radius: 25px
        word-break: keep-all
        span
          color: $yellow
        @media (min-width: 1280px)
          transition: all .3s ease
          background: $white
          span
            color: $black
          svg path
            stroke: $black
          &:hover
            gap: 0 .8rem
            background: $black
            box-shadow: 0px 13px 27px -5px rgba(50,50,93,0.25) , 0px 8px 16px -8px rgba(0,0,0,0.3) , 0px -6px 16px -6px rgba(0,0,0,0.025) 
            span
              color: $yellow
            svg path
              stroke: $yellow
      @media (min-width: 768px)
        flex-direction: row
        .info
          align-items: flex-start
          p
            text-align: left