.titulo-tematico {
  margin-bottom: 45px;

  h5 {
    font-weight: 700;
    font-size: 28px;
    line-height: 100%;
    color: #000;
  }

  p {
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    color: #000;
  }
}

.card-tematico {
  width: 280px;
  height: 230px;
  border-radius: 20px;
  background-color: var(--bg-titulo);
  box-shadow: 0px 0px 12px 0px #00000040;
  position: relative;
  z-index: 7;

}

.titulo-card-tematico {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 14px;
  line-height: 110.00000000000001%;
  padding: 30px 20px 0 20px;

  strong {
    font-weight: 700;
    font-size: 24px;
    line-height: 110.00000000000001%;
  }
}

.logo-card-tematico {
  position: relative;
  display: block;
  padding: 20px 20px 0 20px;
}

.logo-card-tematico img:first-child {
  display: block;
  height: auto;
  width: auto;
}

.img-pattern-tematico {
  position: absolute;
  top: 20px;
  right: 20px;
}

.btn-acessar-tematico {
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--bg-card);
  width: 190px;
  height: 48px;
  border-radius: 0 64px 64px 20px;
  margin-top: auto;

  p {
    font-weight: 600;
    font-size: 14px;
    line-height: 110.00000000000001%;
    margin: 0;
    padding-right: 10px;
    color: var(--cor-titulo-tag);
  }
}


.btn-acessar-tematico:hover {
  background-color: var(--bg-card-hover);
}


.container-card{
  flex-wrap: wrap;
  gap: 30px;
  width: 80%!important;
}


@media (max-width: 767.98px) { 
  .titulo-tematico {
    margin-bottom: 25px;
    p {
      text-align: center;
      line-height: 120%;
    }
  }
}

@media (max-width: 991.98px) {
  .titulo-tematico {
    p {
      text-align: center;
      line-height: 120%;
    }
  }
}

.dark-mode {
  .titulo-card-tematico {
    color: #000;
  } 

  .saude-mental {
    .img-play {
      filter: brightness(0) invert(1);
    }
  }
}