<template>
  <div class="homepage">
    <div class="carousel">
      <el-carousel height="auto" :interval="5000" arrow="never" autoplay>
        <el-carousel-item v-for="(item, index) in 3" :key="index">
          <div class="carousel-item">
            <!-- <el-image class="carousel-image" :src="useStrapiMedia('/uploads/201605211508029798_e37af77a48.png')" fit="fill" /> -->
            <p class="image-label">{{ item }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped>
.carousel-item {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
}

.carousel-image {
  position: relative;
  width: 100%;
  height: 100%;
}

.el-carousel__item {
  width: 100%;
  height: 33vw;
  /* 16:9 Aspect Ratio */
}

.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.8;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  /* background-color: #99a9bf; */
}

.el-carousel__item:nth-child(2n + 1) {
  /* background-color: #d3dce6; */
}

.section p {
  color: var(--el-text-color-regular);
  line-height: 1.6;
}
</style>