Problem with responsiveness in a div with reactjs and Slick Carousel

Question

EN I’m having trouble getting the background of my div responsive, when I lower the screen horizontally and increase vertically, the background is "stretched", making the title and content below where it should be. I think one of these problems occurs because Slick does not "occupy" the space it should, to solve this I had to increase the padding-bottom in order to increase the background.

PORTUGUÊS I’m having Trouble Getting my div’s background Responsive, when I Shrink the screen horizontally and Increase it vertically, the background "stretches", making the title and content Stay Below Where it should be. I think one of These problems occurs because Slick does not "Occupy" the space it should, to Solve this I had to Increase the padding-bottom in order to Increase the background.

With padding-bottom/With padding-bottom No padding-bottom/Without padding-bottom HTML

<div className="container-products">
      <h1 class="title">PRODUTOS</h1>
      <div class="line" />
      <div class="slider">
        <Slider {...settings}>
          <div class="thumbnail">
            <img src={Marcador} class="product" alt="marcador" />
            <div class="product-details">
              <h2>Marcador</h2>
              <p>R$2,00</p>
            </div>
          </div>
          <div class="thumbnail">
            <img src={Almofada} class="product" alt="almofada" />
            <div class="product-details">
              <h2>Almofada</h2>
              <p>R$20,00</p>
            </div>
          </div>
          <div class="thumbnail">
            <img src={Capsula} class="product" alt="capsula" />
            <div class="product-details">
              <h2>Capsulas</h2>
              <p>R$9,99</p>
            </div>
          </div>
          <div class="thumbnail">
            <img src={Copo} class="product" alt="marcador" />
            <div class="product-details">
              <h2>Copo</h2>
              <p>R$15,00</p>
            </div>
          </div>
          <div class="thumbnail">
            <img src={Garrafa} class="product" alt="marcador" />
            <div class="product-details">
              <h2>Garrafa térmica</h2>
              <p>R$19,99</p>
            </div>
          </div>
          <div class="thumbnail">
            <img src={Grao} class="product" alt="marcador" />
            <div class="product-details">
              <h2>Grãos de café</h2>
              <p>R$8,00/kg</p>
            </div>
          </div>
          <div class="thumbnail">
            <img src={Po} class="product" alt="marcador" />
            <div class="product-details">
              <h2>Pó de Café</h2>
              <p>R$8,50</p>
            </div>
          </div>
          <div class="thumbnail">
            <img src={Xicara} class="product" alt="marcador" />
            <div class="product-details">
              <h2>Xícara personalizada</h2>
              <p>R$14,99</p>
            </div>
          </div>
        </Slider>
      </div>
      </div>

CSS

    .container-products {
  position: relative;
  background-color:#20100D;

}

.container-products .title{
  position: relative;
  color: #ffffff;
  font-family: Sunflower;
  font-style: normal;
  font-weight: 300;
  font-size: 5vw;
  top: 18vh;
  padding-bottom: 30vh;
  text-decoration-line: underline;
  text-decoration-color: #b89b34;
}
.container-products .slider {
  width: 80%;
  margin: 0 auto;
  cursor: pointer;
  padding-bottom: 10vh;
}
.slider img{
  margin: 0 auto;
  max-width: 15vw !important;
}
.slider .product-details {
  color: white;
}
.slider .product-details h2 {
  font-family: Montserrat;
  font-size: 2vw;
}
.slider .product-details p {
  font-family: Montserrat;
  color: #b89b34;
  font-size: 1.7vw;
}
.slider .thumbnail{
  margin-left: 1vw;
}