@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100..900&display=swap');


body{
      background:black;
      margin: 0;
}

h1{
    text-align: center;
    color: white;
    margin:0%;
    background: rgb(21, 20, 20);
    height: 60px;
    font-family:"Smooch Sans", sans-serif; 
    font-size:45px;
    
}


h2:hover{
    opacity: 80%;
    color:yellow;
}

h3{
    color:yellow;
    margin-left: 2px;
     font-family:"Smooch Sans", sans-serif;
     font-size:25px;
}

.dmca{
  display:flex;
  gap:40px;
  justify-content: center;
  flex-wrap: wrap;
   font-family:"Smooch Sans", sans-serif;
}

.links{
    text-decoration:none;
    color: yellow;
    display: inline;
}

.card-container {
    /* Define o elemento como um contêiner de grade */
    display: grid;
    /* Adiciona espaçamento entre os cartões */
    gap: 1%; 
   
    grid-template-columns: 1fr 1fr;
    padding: 5px;
}

@media (min-width:768px){
 .card-container{ /* Esta é a chave para a responsividade: */
    /* - repeat(auto-fit, ...): Cria tantas colunas quanto couberem. */
    /* - minmax(300px, 1fr): Cada coluna terá no mínimo 300px de largura. */
    /* Se houver mais espaço, elas crescerão igualmente (1fr) para preenchê-lo, */
    /* garantindo que o número de colunas se ajuste (2, 3, 4, etc.). */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 10px;}

}

.card {
    background: rgb(54, 54, 61);
    /* Garante que o cartão preencha sua célula na grade */
    display: block; 
    text-decoration: none; /* Remove sublinhado do link */
    /* Estilização básica do cartão */
    border: 1px solid  rgb(54, 54, 61);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(37, 35, 35, 0.1);
    transition: transform 0.2s;
}

.card:hover {
    opacity: 70%;
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card img {
    /* Garante que a imagem preencha a largura do cartão */
    width: 100%;
    aspect-ratio: 5/6; 
    
   
}

.card h3, .card p {
    margin-top: 0;
  padding: 0px 4px;
   font-family:"Smooch Sans", sans-serif;

}

/* Escondido por padrão (Telemóveis) */
.banner-desktop {
  display: none;
}

/* Visível por padrão */
.banner-mobile-only {
  display: block;
}

/* Esconde quando o ecrã for maior que 767px (Desktop/Tablets Grandes) */
@media (min-width: 768px) {
  .banner-mobile-only {
    display: none;
  }
}

/* Visível apenas em ecrãs maiores que 768px (Tablets e PCs) */
@media (min-width: 768px) {
  .banner-desktop {
    display: block;
  }
}