last item still showing next button in mobile

[mtzrmzia]

i´m using a custom buttons for next and prev actions, but when i´m in the las item the next button still showing in mobile

<template>
  <client-only>
    <vue-horizontal class="md:mx-6 mx-4 horizontal">
      <template #btn-next>
        <button type="button" class="inline-flex items-center p-2 border border-transparent rounded-full shadow-md  text-white bg-blue-500 hover:bg-blue-600 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:ring-opacity-50">
          <client-only>
            <arrow-narrow-right-icon stroke-width="2" class="w-5 h-5 text-white" />
          </client-only>
        </button>
      </template>
      <template #btn-prev>
        <button type="button" class="inline-flex items-center p-2 border border-transparent rounded-full shadow-md text-white bg-blue-500 hover:bg-blue-600 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:ring-opacity-50">
          <client-only>
            <arrow-narrow-left-icon stroke-width="2" class="w-5 h-5 text-white" />
          </client-only>
        </button>
      </template>
      <section v-for="item in items" :key="item.i">
        <div class="flex 2xl:flex-row flex-col w-full 2xl:items-stretch items-center">
          <div class="2xl:w-7/12 w-full flex-shrink-0 2xl:pr-4 flex flex-col 2xl:order-first order-last">
            <div class="2xl:flex-1 my-4 2xl:my-0">
              <h3 class="text-bluegray-700 md:text-xl text-lg font-semibold line-clamp-3" :title="item.title">
                {{ item.title }}
              </h3>
            </div>
            <div class="flex flex-col space-y-2">
              <ProgressExperience class="hidden 2xl:block" />
              <BaseButton>
                Continuar experiencia
              </BaseButton>
            </div>
          </div>
          <div class="2xl:w-5/12 w-full flex-shrink-0">
            <div class="2xl:aspect-w-3 2xl:aspect-h-3 aspect-w-3 aspect-h-2 rounded-lg shadow overflow-hidden">
              <img class="object-cover h-full w-full" :src="item.img" alt="">
            </div>
            <ProgressExperience class="block 2xl:hidden mt-2" />
          </div>
        </div>
      </section>
    </vue-horizontal>
  </client-only>
</template>

<script>
import VueHorizontal from 'vue-horizontal'

export default {
  name: 'ResumeExperiencesIndex',
  components: { VueHorizontal },
  data () {
    return {
      items: [...Array(6).keys()].map((i) => {
        return { i, title: `Lorem ipsum dolor sit amet, consectetur adipisicing elitwrr wer werwe ger sdefwe frwerwe. #${i}`, content: 'Content', img: 'https://cdn.geekstadium.com/experiences/b8a45cc6-db59-4636-a5ba-6a8b79369b9c--bas_um_cover.jpg' }
      })
    }
  }
}
</script>

<style scoped>
section {
  @apply bg-white md:p-6 p-4 rounded-lg flex md:flex-row flex-col w-full rounded-lg shadow mr-6;
  height: auto !important;
}

.horizontal >>> .v-hl-container {
  padding-bottom: 2rem !important;
}

@media (min-width: 540px) {
  section {
    width: calc((100% - (24px)) / 2);
  }
}

@media (min-width: 1024px) {
  section {
    width: calc((100% - (2 * 24px)) / 3);
  }
}

</style>

what am i doing wrong?