Custom carousel size in Bootstrap but responsive - html

Question

Is this carousel style possible for Bootstrap?
I've been trying this for days, I need help :(
First picture is the wireframe, ...
and the second picture is the actual look in the browser I'm working on...
...but it seems like it's not responsive when moved into larger screens
Here's the HTML-code:
<section id="wow_h>
<div class="container-fluid">
<div class="row">
<div id="carouselExampleIndicators" class="carousel slide carousel-style " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/Untitled-1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/assets/Untitled-2.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/assets/Untitled-3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id ="hero-title" class="">
<h1>Headline
</br>
goes here</h1>
<p>Hero subtitle goes here
</br>
lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</section>
And here's the CSS-code:
// HOME
.carousel{
z-index: 1000;
margin: -5% 0 0 0;
}
#carouselExampleIndicators{
img{
background: cover;
}
}
.carousel-indicators > li {
border-radius: 50%;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: block;
}
#wow_home{
position: relative;
#hero-title{
border-radius: 25px;
background: #f2efef;
color: #000;
z-index: 1080;
padding: 5%;
margin: 0 0 0 60%;
position: absolute;
h1{
text-transform: none;
}
}
}