Имеется следующий код блока:
<body>
<div style="background: linear-gradient(110deg, rgb(66, 73, 81) 63%, transparent 63%), url(https://source.unsplash.com/random/860) right center / auto 100% no-repeat;">
<div class="dark-slider__bg-block"></div>
<div class="dark-slider__slide-content">
<div class="dark-slider__wrapper">
<h2 class="dark-slider__head">
<div style="color: rgb(255, 255, 255);">
<div>
<div>
<div>
<div>
<p>Экипировка Base</p>
</div>
</div>
</div>
</div>
</div>
</h2>
<div class="dark-slider__text" style="color: rgb(255, 255, 255);">
<div>
<div>
<div>
<div>
<div>
<p>В комплекте для горных лыж вы получите лыжи и ботинки Salomon или Atomic. В комплекте для сноуборда будут доски Burton Cruzer или Progression с новыми ботинками Burton.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="" class="dark-slider__button">Забронировать</a>
<a href="" class="dark-slider__link">Забронировать</a>
</div>
</div>
</div>
</body>
На широких экранах наблюдается следующая проблема с
background (тогда как картинка должна заполнить все пространство от правой границы градиента до правой границы блока):
Пробовал решить проблему при помощи
background-size: cover, однако картинка слишком крупно масштабируется:
В итоге я хотел бы получить такой блок (как видно, картинка здесь на масштабируется так крупно, как на скриншоте выше)
Как можно решить данную проблему?
JSFiddle:
https://jsfiddle.net/q1z96gs4 
