.swiperControls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    /* height: 100%; */

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    z-index: 50;
}
/* .swiperControls .active {
    background: linear-gradient(
        to right,
        var(--red) 0%,
        var(--orangeDarker) 100%
    ) !important;
} */

.swiperControls .arrow-left,
.swiperControls .arrow-right {
    width: 52px;
    height: 52px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--ultraDark30);
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    /* background: linear-gradient(
        to right,
        var(--red) 0%,
        var(--orangeDarker) 100%
    ); */
}
.swiperControls .arrow-left img,
.swiperControls .arrow-right img {
    height: 26%;
    object-fit: contain;
}
.swiperControls .arrow-left img {
    transform: translateX(-2px);
}
.swiperControls .arrow-right img {
    transform: translateX(-2px);
}
.swiperControls .arrow-right img {
    scale: -1 1;
}

.swiperControls .disabled {
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
    /* background: var(--blackDarker) !important; */
    opacity: 0.4;
}
@media (max-width: 1500px) {
    .swiperControls {
        width: 96vw;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}
@media (max-width: 768px) {
    .swiperControls {
        /* width: 88.5vw; */
        width: calc(86vw + (58 * ((100vw - 360px) / (768 - 360))));
    }
    .swiperControls .arrow-left,
    .swiperControls .arrow-right {
        width: 40px;
        height: 40px;
    }
    .swiperControls .arrow-left img,
    .swiperControls .arrow-right img {
        transform: translateX(-1px);
    }
}