Flexbox stuff .card {
  margin-top: 1em;
}

@media screen and (min-width: 40em) {
  .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .card {
    flex: 0 1 calc(50% - 1em);
  }

  figcaption h5 {
    font-size: 1em;
  }
}

@media screen and (min-width: 60em) {

  .card {
    flex: 0 1 calc(33% - 1em);
  }

}


figure {
  margin: 0em;
  position: relative;
}

figure figcaption {
  opacity: 0;
  position: absolute;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  transition: opacity 1s;
}

figure:hover figcaption {
  opacity: 1;
}

.maozinha_mouse :hover {
  cursor: pointer;
}

.maozinha_mouse:active {
  background-color: rgb(173, 173, 173);
}

a.link_interno {
  color: whitesmoke;
  text-decoration: none;

  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

a.black:hover {
  text-decoration: underline;
}

a.white {
  color: whitesmoke;
}

a.black {
  color: #242424;
}



.card {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Adiciona uma transição suave para transformação e sombra */
  border: 2px solid white;
}

.card:hover{
  transform: scale(1.05);
  box-shadow: rgba(50, 50, 93, 0.35) 0px 4px 10px -1px, rgba(0, 0, 0, 0.4) 0px 3px 6px -2px; /* Sombra um pouco mais intensa no hover */

}
/* Code to make a 16:9 ratio image 
  */
.card-figure {
    /* border: 1px solid #686868; */
    position: relative;
    width: 100%;
    height: 250px;
    padding-top: 56.25%;
}

figure.card-figure img {
    position: absolute;
    width: 100%;
    height: 100%;
    /* max-height: 100%; */
    left: 50%;
    top: 50%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    border-radius: 0%;
}

.card-header {
    overflow: hidden;
    box-sizing: content-box;
    /* height: 2.6em; */
    /* max-height: 2.6em; */
    height: 1.7em;
    max-height: 1.7em;
    max-lines: 2;
    text-align: justify;
    padding-left: 8px;
    padding-right: 8px;
}

.card-header > h5 {
  /* font-size: 1.20rem; */
  font-size: 0.85em;
  font-family: 'Source Code Pro';
  font-weight: 600;
} 

.card, .btn-group > .btn {
  border-radius: 8px;
}

.card, .card-footer.bg-light {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.card, .card-footer, .card-footer.bg-light {
  border-bottom-left-radius: 0px !important;
}

.card .card-footer .pub-category{
  /* width: 15px;
  height: 15px;
  */
  /* background-color: yellow;  */
  position: absolute;
  /* margin-top: 8px; */
  border-radius: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-size: smaller;
  
  color: #545454;
  background-color: #f8f9fa;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
  border: none;
  border-top: none;
  border-bottom: 2px solid white;
  border-left: 2px solid white;
  border-right: 2px solid white;
  bottom: -25px;
  left: -2px;
  
}

.card .card-footer .pub-category span{
  border-radius: 6px;
  font-size: smaller;
  color: #545454;
  
  /* background-color: whitesmoke; */
}

.form-check-input:checked {
  background-color: #545454;
  border-color: #545454;
}