.slider-artist {
    background: var(--middle-green)
}

.slider-artist--container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px 0
}

@media screen and (min-width: 992px) {
    .slider-artist--container {
        gap: 56px;
        padding: 80px 0
    }
}

.slider-artist--header {
    color: white;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.slider-artist--header h2 {
    text-align: center;
    color: white
}

@media screen and (min-width: 992px) {
    .slider-artist--header h2 {
        max-width: 570px;
        text-align: left
    }
}

.slider-artist--item {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.slider-artist--item img {
    height: 350px;
    -o-object-fit: cover;
    object-fit: cover;
    border: 4px solid white
}

.slider-artist--item span {
    color: white;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.56px
}

.slider-artist--navigation,
.slider-artist--header {
    padding: 0 16px
}

@media screen and (min-width: 1312px) {

    .slider-artist--navigation,
    .slider-artist--header {
        padding: 0
    }
}

.slider-artist--navigation {
    justify-content: center
}

@media screen and (min-width: 992px) {
    .slider-artist--navigation {
        justify-content: flex-end
    }
}

.slider-artist .owl-carousel .owl-stage-outer {
    margin-left: calc(-48px + 16px)
}

@media screen and (min-width: 480px) {
    .slider-artist .owl-carousel .owl-stage-outer {
        margin-left: calc(-100px + 16px)
    }
}

@media screen and (min-width: 768px) {
    .slider-artist .owl-carousel .owl-stage-outer {
        margin-left: calc(-92px + 16px)
    }
}

@media screen and (min-width: 1120px) {
    .slider-artist .owl-carousel .owl-stage-outer {
        margin-left: calc(-120px + 16px)
    }
}

@media screen and (min-width: 1280px) {
    .slider-artist .owl-carousel .owl-stage-outer {
        margin-left: 0
    }
}