.swiper-pagination {
  display: flex;
}
.swiper-pagination-fraction.swiper-pagination {
  position: relative;
  justify-content: end;
  color: var(--color-foreground-foreground-default);
  font-weight: var(--font-weight-font-font-weight-bold);
  font-size: var(--typography-font-size-body2-strong-sm);
  gap: 4px;
  line-height: var(--typography-line-height-body2-strong-sm);
  padding-right: 42px;
  margin-top: var(--space-space-xl);
}
.swiper-button {
  position: absolute;
  right: 0;
  display: flex;
  gap: 55px;
  align-items: center;
  bottom: 3px;
  height: 32px;
}
.swiper-button div {
  background-color: var(--color-surface-surface-active);
  border-radius: var(--border-radius-border-border-radius-rounded);
  width: 32px;
  height: 32px;
  margin-top: 0;
  top: 0;
  position: relative;
  left: 0;
  z-index: 11;
}
.swiper-button div::after {
  display: none;
}
.swiper-button .svg-icon {
  background-color: var(--color-foreground-foreground-on-active);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 16px;
  height: 16px;
  display: inline-flex;
}
.swiper-button .swiper-button-prev .svg-icon {
  mask-image: url('assests/images/chevron-left.svg');
  -webkit-mask-image: url('assests/images/chevron-left.svg');
}
.swiper-button .swiper-button-next .svg-icon {
  -webkit-mask-image: url('assests/images/chevron-right.svg');
  mask-image: url('assests/images/chevron-right.svg');
}
.swiper-button div.swiper-button-disabled {
  background-color: var(--color-surface-surface-disabled);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: unset;
}
.swiper-button .swiper-button-disabled .svg-icon {
  background-color: var(--color-foreground-foreground-disabled);
}
.inverted .swiper-button div,
.text_color_white .swiper-button div {
  background-color: var(--color-background-background-default);
}
.inverted .swiper-button .svg-icon,
.text_color_white .swiper-button .svg-icon {
  background-color: var(--color-foreground-foreground-active);
}
.inverted div.swiper-button-disabled,
.text_color_white div.swiper-button-disabled {
  background-color: var(--color-surface-surface-on-inverse-disabled);
}
.inverted .swiper-button-disabled .svg-icon,
.text_color_white .swiper-button-disabled .svg-icon {
  background-color: var(--color-foreground-foreground-on-inverse-disabled);
}
.inverted .swiper-pagination-fraction.swiper-pagination,
.text_color_white .swiper-pagination-fraction.swiper-pagination {
  color: var(--color-foreground-foreground-on-active);
}
@media only screen and (max-width: 960px) {
  .swiper-button, .swiper .swiper-pagination-fraction {
    display: none;
  }
}