.fancy-arrow {
  @apply flex justify-center items-center md:w-[60px] w-[40px] h-full relative bg-[red] before:bg-black before:w-0 before:h-px before:opacity-0 md:after:border-l-[17px] after:border-l-[12px] after:border-l-[black] md:after:border-y-[15px] after:border-y-[10px] after:border-y-transparent after:border-solid group-hover:before:w-full group-hover:before:opacity-100 group-hover:after:translate-x-0 group-hover:after:-translate-y-2/4 group-hover:after:left-auto group-hover:after:right-0;
}

.fancy-arrow::before,
.fancy-arrow::after {
  @apply content-[""] absolute origin-center translate-x-2/4 -translate-y-2/4 transition-all duration-[0.2s] ease-[ease-in-out] right-2/4 top-2/4;
}