.default {
  @apply cursor-pointer py-6 border-b relative;
  & .cover {
    @apply relative pb-3/5 w-full xl:pb-2/5;
  }
  & ul {
    @apply absolute bottom-0 right-0 pb-3 flex;
  }
}
.default:last-child {
  @apply border-none;
}

@media screen and (min-width: 1024px) {
  .default {
    @apply flex flex-row-reverse items-center justify-between gap-20 cursor-pointer mx-auto w-5/6 py-10;
    & .cover {
      flex: 0.8;
      @apply relative lg:pb-1/4;
    }
    & section {
      @apply py-8;
      flex: 1;
    }
  }
}

.top {
  @apply flex py-6 items-center justify-between relative min-w-full cursor-pointer;
  & section {
    flex: 1;
  }
  & .topNumber {
    flex: 0.125;
    @apply text-2xl font-bold text-primary-20;
  }
}

.hero {
  @apply relative cursor-pointer transition-transform transform scale-100;
  & .cover {
    @apply relative pb-3/5 w-full;
  }
  & ul {
    @apply absolute -bottom-2 -right-2 flex;
  }
}

.lists {
  @apply cursor-pointer mb-10 py-16 border-b flex flex-row-reverse items-center justify-between relative mx-auto w-full mr-10 md:w-10/12 md:py-12;
  scroll-snap-align: start;
  & .cover {
    @apply relative pb-2/5 flex-1 xl:pb-1/4;
  }
  & section {
    flex: 1.5;
    @apply mr-8;
  }
  & ul {
    @apply flex absolute bottom-0 bg-secondary right-0 transform translate-x-1 translate-y-1;
  }
}

.carousel {
  @apply cursor-pointer flex flex-row-reverse items-center justify-between relative min-w-full mr-10;
  scroll-snap-align: start;
  & .cover {
    @apply relative pb-2/3 flex-1 xl:pb-1/3;
  }
  & section {
    flex: 1.5;
    @apply mr-8;
  }
  & ul {
    @apply flex absolute bottom-0 bg-primary right-0 transform translate-x-1 translate-y-1;
  }
}

.title {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
