.swiper-pagination-progressbar {
	--swiper-pagination-progressbar-bg-color: hsl(var(--gray-100));
	--swiper-pagination-progressbar-size: 1px;
	position: relative !important;
	margin-top: 3rem;
	margin-bottom: 0.5rem;
	opacity: 0;
}

.swiper-initialized .swiper-pagination-progressbar {
	opacity: 1;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	--swiper-pagination-color: hsl(var(--heading));

	&:before {
		content: "";
		display: block;
		position: absolute;
		top: 50%;
		right: 0;
		background-color: hsl(var(--primary));
		transform: translateY(-50%);
		border-left: 4px solid white;
		border-right: 4px solid white;
		height: 14px;
		width: 4px;
	}
}

swiper-container::part(pagination){
	--swiper-pagination-progressbar-bg-color: hsl(var(--gray-100));
	--swiper-pagination-progressbar-size: 1px;
	--swiper-pagination-color: hsl(var(--heading));

  position: relative !important;
  margin-top: 3rem;
  margin-inline: 1.5rem;
  width: auto;

  @media (min-width: 1024px) {
    margin-inline: 7.5rem;
  }
}