Legenda do carousel não está responsiva

Depois de assistir a aula de Bootstrap 4 eu tentei copiar uma página aleatória da internet pra ver se conseguia. Consegui ir até bem, mas quando acesso em resoluções menores a legenda do carousel que era pra desaparecer, não desaparece de forma alguma. Tentei de tudo. Tem como alguém me ajudar a descobrir o porque?

Meu main ta assim:

<main class="w-75 px-5 mx-auto tudo-maiusculo">
        <section id="carouselExampleControls" class="carousel slide px-5" data-interval="3000" data-ride="carousel">
          <ol class="carousel-indicators d-none">
                <li data-target="#carouselExampleControls" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleControls" data-slide-to="1"></li>
                <li data-target="#carouselExampleControls" data-slide-to="2"></li>            
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/carousel1.jpg" class="d-block w-100 carosel-tamanho" alt="...">
                <div class="carousel-caption d-none d-md-block bg-transparente">
                    <p class="tirar-transparente">Catuaí shopping Maringá</p>
                </div>
            </div>
            <div class="carousel-item">
              <img src="images/carousel2.jpg" class="d-block w-100 carosel-tamanho" alt="...">
              <div class="carousel-caption  d-none d-md-block bg-transparente">                
                    <p class="tirar-transparente">Catuaí shopping center Londrina</p>    
              </div>
            </div>
            <div class="carousel-item">
              <img src="images/carousel3.jpg" class="d-block w-100 carosel-tamanho" alt="...">
              <div class="carousel-caption  d-none d-md-block bg-transparente"> 
                    <p class="tirar-transparente">Shopping Catuaí Palladium Foz do Iguaçu</p>                 
              </div>
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </section>

        <section class="container px-5 py-5">
            <div class="row">
                <div class="col">
                <p class="d-block titulo-imagem-meio">Shopping Centers</p>
                 <img src="images/shopping-1.jpg" class="d-block w-100 h-75" alt="..."/>
                </div>
                <div class="col">
                <p  class="d-block titulo-imagem-meio">Construtoras e incorporadora</p>
                 <img src="images/shopping-2.jpg" class="d-block w-100 h-75" alt="..."/>
                </div>
            </div>
        </section>
    </main>

e meu css ta assim:

.carosel-tamanho {
    object-fit: cover;
    height: 455px;
}

.tudo-maiusculo {
    text-transform: uppercase;
    font-family: 'Titillium Web', sans-serif;
    font-size:1rem;
    font-weight:bold;
}

.header-tamanho {
    height:130px;
}

.navbar-tamanho {
    height:100px;
}

.tamanho-brand {
    height:100px;
    width:auto;
}

.esconder {
    visibility:hidden;
}

.bg-transparente {
    background-color: #ffffff;
    opacity: 0.9;

}

.tirar-transparente {
    font-weight: bold;
    color: #000000;
}

.carousel-caption {
 width: 36%;
 margin-left:49%;
 top:87% ;
 bottom:0px;
}

.titulo-imagem-meio{
    color: red;
    font-size:1rem;
}

.altura-logo {
    height:10%;
}