.search-container {
    max-width: 140rem;
    margin: 5rem auto 3rem auto;
}

.card-container-search {
  max-width: 106rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
    max-width: none;
    margin: 1rem 0 0 0;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    background-color: #fff;
    cursor: pointer;
  }

  .card-content {
    padding: 1rem;
  }

  .card-category {
    background-color: #282c34;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
  }

  .card-title {
    font-weight: bold;
    margin: 0.5rem 0;
  }

  .card-date {
    color: #666;
    margin-bottom: 0.75rem;
  }

  .card-description {
    color: #333;
  }


  input {
    background-color: #fff;
    color: #000;
    transition: background-color 0.5s, color 0.5s;
  }
  
  input.effect {
    background-color: #d3d3d3; /* gris pastel */
    color: white;
  }
  
  

  @media only screen and (min-width: 576px) {

    .card-container-search {
      justify-content: center;
    }

    .card {
      max-width: 27rem;

    }

  }
  
  @media only screen and (min-width: 768px) {

    .card-container-search {
      justify-content: center;
    }

    .card {
      max-width: 37rem;

    }
  }
  
  
  @media only screen and (min-width: 900px) {
    .card-container-search {
      justify-content: center;
    }
  
    .card {
      max-width: 42rem;

    }
  }
  
  @media only screen and (min-width: 1200px) {
    .card-container-search {
      justify-content: left;
    }
  
    .card {
      max-width: 52rem;

    }
      
  }