#producer { position: relative; }

#producer .row svg { width: 85px; height: 55px; position: absolute; left: 15px; top: 40px; z-index: -1; }

#producer .row svg path { fill: var(--main); }

#producer .row .wrapper #carouselProducer .carousel-inner { overflow: visible; }

#producer .row .wrapper #carouselProducer .carousel-inner .carousel-item { display: flex; justify-content: flex-end; align-items: center; }

#producer .row .wrapper #carouselProducer .carousel-inner .carousel-item .background { aspect-ratio: 971 / 684; width: 100%; height: auto; }

@media (min-width: 576px) {
    #producer .row svg { left: -3px; top: 40px; }
}

@media (min-width: 768px) {
    #producer .row svg { left: -9px; top: 40px; }
}

@media (min-width: 992px) {
    #producer .row svg { left: -1px; top: 40px; }
    #producer .row .wrapper { position: absolute; right: 0; top: 0; z-index: -1; }
    #producer .row,
    #producer .row .wrapper #carouselProducer .carousel-inner .carousel-item .background { width: auto; min-height: 684px; }
    #producer .row .wrapper #carouselProducer .carousel-inner .carousel-item .background { background-position: right -637.5px center; }
}

@media (min-width: 1200px) {
    #producer .row svg { left: -15px; top: 40px; }
    #producer .row .wrapper #carouselProducer .carousel-inner .carousel-item .background { background-position: right -475px center; }
}

@media (min-width: 1400px) {
    #producer .row svg { left: -25px; top: 40px; }
    #producer .row .wrapper #carouselProducer .carousel-inner .carousel-item .background { background-position: right -250px center; }
}

@media (min-width: 1460px) {
    #producer .row .wrapper #carouselProducer .carousel-inner .carousel-item .background { background-position: right -225px center; }
}

@media (min-width: 1920px) {
    #producer .row svg { left: -80px; top: 40px; }
    #producer .row .wrapper #carouselProducer .carousel-inner .carousel-item .background { background-position: right 0 center; }
}