JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
  <div class="dark-slider__bg-pic">
    <div class="dark-slider__slide-content">
        <div class="dark-slider__wrapper">
            <h2 class="dark-slider__head">
                <div data-v-608832da="" style="color: rgb(255, 255, 255);">
                    <div data-v-608832da="">
                        <div>
                            <div>
                                <div contenteditable="true" tabindex="0" class="ProseMirror">
                                  <p>Экипировка Base</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </h2>
            <div class="dark-slider__text" style="color: rgb(255, 255, 255);">
                <div data-v-608832da="">
                    <div data-v-608832da="">
                        <div>
                            <div>
                                <div contenteditable="true" tabindex="0" class="ProseMirror">
                                  <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>

SCSS

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  margin: 0;
}


.dark-slider {
        &__bg-pic {
          background: url(https://bipbap.ru/wp-content/uploads/2017/08/2.jpg) right center / 50% 100% no-repeat;

        }
        &__slide-content {
            color: #fff;
            padding-top: 140px;
            padding-bottom: 93px;
            background: linear-gradient(110deg, rgb(66, 73, 81) 63%, transparent 63%);
        }

        &__wrapper {
            background: rgba(46, 50, 55, 0.9);
            width: 56%;
            padding: 50px 60px 65px;
            margin: 0 auto;
        }

        &__head, &__text {
            padding-left: 6px;
        }

        &__head {
            font-weight: 300;
            font-size: 3rem;
            line-height: 55px;
            margin-bottom: 35px;
        }

        &__text {
            font-size: 1.3125rem;
            margin-bottom: 142px;
            line-height: 36px;
        }

        &__button {
            display: block;
            width: 253px;
            height: 62px;
            text-align: center;
            color: #fff;
            background: -webkit-gradient(linear, left top, left bottom, from(#1B81E8), to(#096FD8));
            background: linear-gradient(180deg, #1B81E8 0%, #096FD8 100%);
            font-size: 1.08rem;
            text-decoration: none;
            line-height: 55px;
        }
        &__link {
            display: none;
        }
    }

    @media screen and (max-width: 1199.98px) {
        .dark-slider {
            &__wrapper {
                width: 78%;
            }
        }
    }

   @media screen and (max-width: 991.98px) {
        .dark-slider {
            &__bg-block {
                height: 191px;
                background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("../../assets/img/AKP_4129.jpg") no-repeat center;
                background-size: cover;
            }
            &__slide-content {
            ...