.slider-nav-container {
    display: flex;
    align-items: center;
    color: #fff;
    gap: 14px;
}

.slider-navigation {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    background-color: transparent;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.slider-navigation:hover {
    opacity: .8;
}

.slider-navigation::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    content: "";
    mask: url('/content/dam/kpmg/pt/images/esg-academy/arrows-white.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    transform: translate(-50%, -50%);
}

.slider-navigation.slider-navigation--prev {
    transform: rotate(180deg);
}

.slider-navigation[aria-disabled="true"],
.slider-navigation:disabled {
    pointer-events: none;
    opacity: .6;
}

.slider-pagination {
    display: flex;
    width: fit-content!important;
    gap: 4px;
}

.slider-pagination > .swiper-pagination-bullet {
    background-color: currentColor;
    width: 2px;
    height: 2px;
    border: unset;
    border-radius: 0;
    transition: width 300ms ease;
}
.slider-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 5px;
    background-color: currentColor;
}