@mixin bannerMid
  width: 100%
  @media (min-width: 768px)
    display: none
    
@mixin spaceSection
  padding: 10% 0
  @media (min-width: 768px)
    padding: 8% 0
  @media (min-width: 1024px)
    padding: 6% 0
  @media (min-width: 1280px)
    padding: 5% 0

@mixin bannerSection
  width: 100%
  .content
    width: 100%
    align-items: stretch
    .info
      padding: 3rem 2rem
      align-items: flex-start
      justify-content: center
      background: rgba(255, 255, 255, 1)
      gap: 1.5rem 0
      //border-bottom: 3px solid $yellow
      h1
        //text-transform: uppercase
        @media (min-width: 1024px)
          font-size: 28px
        @media (min-width: 1440px)
          font-size: 30px
        @media (min-width: 1600px)
          font-size: 32px
      p, h1
        color: $textColor
      .moreText
        color: $yellow
        @media (min-width: 1024px)
          display: none
      .textReveal
        color: $textColor
        @media (min-width: 1024px)
          display: inline-flex
        @media (min-width: 1900px)
          font-size: 18px
    @media (min-width: 768px)
      flex-direction: row-reverse
      .info, img
        width: 50%
      img
        object-fit: cover
    @media (min-width: 1024px)
      .dots
        display: none
      .info
        padding: 3rem
    @media (min-width: 1280px)
      img
        width: 55%
        height: 550px
        object-fit: cover
      .info
        width: 45%
        padding: 0 4rem
    @media (min-width: 1440px)
      img
        width: 60%
        height: 80vh
        object-fit: cover
      .info
        width: 40%
    @media (min-width: 1600px)
      .info
        padding: 0 5rem
    @media (min-width: 1900px)
      .info
        padding: 0 7rem

@mixin paginator
  width: 100%
  align-items: center
  justify-content: center
  gap: 0 2rem
  margin-top: 2rem
  @media (min-width: 768px)
    gap: 0 4rem
  &>img
    width: 30px
    @media (min-width: 1280px)
      cursor: pointer
  .numbers
    align-items: center
    gap: 0 2rem
    @media (min-width: 768px)
      gap: 0 3rem
    @media (min-width: 1280px)
      gap: 0 4rem
    span
      @media (min-width: 768px)
        font-size: 16px
      @media (min-width: 1440px)
        font-size: 20px
    span:not(.selected)
      color: $black
      &:hover
        text-decoration: underline
      @media (min-width: 1280px)
        cursor: pointer
    span.selected
      position: relative
      color: #18191A
      &::before
        content: ''
        position: absolute
        z-index: -1
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        width: 30px
        height: 30px
        border-radius: 50%
        background: $yellow

@mixin listEquipment
  width: 80%
  margin: 0 auto
  gap: 2rem
  display: flex
  flex-wrap: wrap
  justify-content: center
  align-items: stretch
  @media (min-width: 1600px)
    width: 85%
  // place-items: center
  // @media (min-width: 768px)
  //   width: 80%
  //   grid-template-columns: repeat(2,1fr)
  // @media (min-width: 1024px)
  //   grid-template-columns: repeat(3,1fr)
  // @media (min-width: 1280px)
  //   gap: 3rem 0
  // @media (min-width: 1440px)
  //   gap: 3rem
  //   grid-template-columns: repeat(4,1fr)

@mixin itemEquipment
  padding: 1rem
  border-radius: 15px
  overflow: hidden
  align-items: center
  border: 1px solid #c4c4c4
  width: 100%
  max-width: 305px
  gap: 0 1rem
  @media (min-width: 768px)
    flex-direction: column
    align-items: flex-start
    padding: 0
  @media (min-width: 1280px)
    &:hover
      .text span
        text-decoration: underline
  &>img
    width: 35%
    height: 100%
    object-fit: cover
    @media (min-width: 768px)
      width: 100%
  .text
    width: 50%
    align-items: flex-start
    gap: 10px
    @media (min-width: 768px)
      padding: .5rem 1rem
      width: 100%
      flex-direction: row
      align-items: center
      justify-content: space-between
      gap: 0 2rem
    @media (min-width: 1600px)
      span
        font-size: 18px
    span
      font-weight: $font-bold
      color: $black
      //text-transform: uppercase