@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');


* {
  font-family: 'Montserrat';
}



.banner-quatro-blocos-card-body {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 20px;
  border-radius: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: black!important;
}

.text-container .h4{
   font-size: 16px;
   font-weight: 400px;
}


.btn-ver-mais{
  font-weight: 500!important;
  font-size: 13px!important;
  text-decoration: underline!important;
}


.description-card{
   font-size: 12px!important;
   color: rgba(0, 0, 0, 1);
   font-weight: 400!important;
}

.link-banner {
  color: black;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
}


@media (max-width: 991px) {


  .banner-quatro-blocos-card-body {

    background-position: bottom;

  }

}





/* Ajustes para telas menores que 650px */
@media (max-width: 650px) {
  #banner-quatro-blocos .banner-quatro-blocos-container {
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espaço entre os blocos */
    flex-wrap: nowrap; /* Garante que não haja quebra de linha */
  }

  #banner-quatro-blocos .btn-ver-mais {
    position: relative;
    margin-top: 20px;
    padding-bottom: 10px;
    display: flex;
    gap:10px;
    align-self: center;
    flex-direction: row-reverse !important;
    min-width: 200px;
    justify-content: center !important;
    align-items: center !important;
  }

#banner-quatro-blocos .btn-ver-mais a{
  margin: 0px!important;
}

  #banner-quatro-blocos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; 
  }
}

/* Ajustes para telas maiores que 650px */
@media (min-width: 650px) {
  #banner-quatro-blocos .banner-quatro-blocos-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px; /* Espaço entre as colunas */
  }

  #banner-quatro-blocos .btn-ver-mais {
    position: relative;
    margin-top: 20px;
    padding-bottom: 10px;
    align-self: flex-end;
  }

  #banner-quatro-blocos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Espaço entre as colunas */
  }

 
  #banner-quatro-blocos .banner-quatro-blocos {
    box-sizing: border-box;
    flex: 1 1 calc(33.333% - 10px); 
    min-width: 0; 
  }

 
  @supports (width: min(max(0px, 100px), 100px)) {
    #banner-quatro-blocos .banner-quatro-blocos:last-child {
      flex: 1 1 auto;
    }
  }
}