.heading-transition.transition-arrow {
  @apply -mb-[25px];
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 25px),
    calc(50% - 25px) calc(100% - 25px),
    50% 100%,
    calc(50% + 25px) calc(100% - 25px),
    0 calc(100% - 25px)
  );
}

.heading-transition:has(.transition-arrow) {
  @apply -mb-[25px];
}

@media screen and (max-width: 1023px) {
  .heading-transition.transition-arrow {
    clip-path: none;
  }
}

.heading-transition .collections-wrapper {
  @apply text-center mb-4;
}

.heading-transition .gradient-bar {
  display: block;
  border-radius: 1000px;
  @apply bg-gradient-brand;
  height: 8px;
  width: 160px;
  margin: 24px auto 0;
}