section.courseInt
  padding: 10% 0
  @media (min-width: 768px)
    padding: 8% 0
  @media (min-width: 1024px)
    padding: 6% 0 0
  @media (min-width: 1280px)
    padding: 5% 0 0
  .container
    align-items: flex-start
  .container .backTrain
    align-items: center
    gap: 0 .5rem
    margin-bottom: 1.5rem
    span
      color: $black
    @media (min-width: 1024px)
      margin-bottom: 2rem
    @media (min-width: 1280px)
      &:hover
        span
          text-decoration: underline
  .container .contentCourse
    align-items: center
    @media (min-width: 1024px)
      align-items: flex-start
    .info
      gap: 1rem 0
      width: 100%
      padding-bottom: 1.2rem
      img
        width: 100%
      .text
        width: 100%
        align-items: flex-start
        gap: 1rem 0
        h2
          @media (min-width: 1024px)
            font-size: 24px
          @media (min-width: 1280px)
            font-size: 26px
          @media (min-width: 1440px)
            font-size: 28px
          @media (min-width: 1600px)
            font-size: 30px
      .duration
        justify-content: flex-start
        align-items: center
        gap: 0 .5rem
        span
          font-size: 14px
      @media (min-width: 1024px)
        flex-direction: row-reverse
        align-items: center
        gap: 0 10%
        padding-bottom: 1.5rem
      @media (min-width: 1024px)
        img
          width: 60%
        .text
          width: 30%
      @media (min-width: 1024px)
        img
          width: 65%
        .text
          width: 25%
    .requirements
      width: 100%
      padding: 1.5rem 0
      // border-top: 1px solid #c4c4c4
      // border-bottom: 1px solid #c4c4c4
      // margin-bottom: 1rem
      align-items: center
      h3
        margin-bottom: 1.5rem
        @media (min-width: 1024px)
          font-size: 20px
        @media (min-width: 1280px)
          font-size: 22px
        @media (min-width: 1600px)
          font-size: 24px
      .listRequirements
        gap: 1rem
        align-items: center
        @media (min-width: 1024px)
          width: 60%
          gap: 1rem
        @media (min-width: 1600px)
          width: 50%
        p
          padding-bottom: 1rem
          border-bottom: 1px solid #c4c4c4
          text-align: center
          @media (min-width: 1024px)
            width: 100%
            font-size: 18px
            padding: 0 1rem 0rem
        // @media (min-width: 768px)
        //   grid-template-columns: repeat(2, 1fr)
        // @media (min-width: 1024px)
        //   grid-template-columns: repeat(3, 1fr)
        // @media (min-width: 1280px)
        //   grid-template-columns: repeat(4, 1fr)
        //   gap: 3rem
        // @media (min-width: 1600px)
        //   grid-template-columns: repeat(5, 1fr)
  .container .downTem
    align-items: center
    gap: 0 .5rem
    span
      color: $black
      font-weight: 700
    img
      width: 30px
    @media (min-width: 1280px)
      &:hover
        span
          text-decoration: underline