.load-more-button {
  @apply text-primary font-semibold flex items-center justify-center gap-2;

  &:after {
    @apply content-[''] h-8 w-8 block;
    background-image: url('../resources/img/icons/button-arrow-down-small.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease-in-out;
    transform: translateY(0);
  }

  &:hover {
    &:after {
      transform: translateY(2px);
    }
  }
}