.section-father {
  display: grid;
  grid-template-columns: 1fr;
}

.detailsContainer {
  display: none;
}

.container-cards {
  padding: 1rem;

  .card {
    padding: 0%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 4rem;
    color: #474747;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .moreDetails {
      text-align: end;
      width: 100%;

      button {
        background: transparent;
        border: 0;
      }
    }
    .information {
      width: 100%;
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      h2 {
        width: 100%;
        font-size: 18px;
        color: #474747;
      }

      p {
        width: 100%;
        margin: 0%;
        padding: 0%;
        text-align: start;
        font-size: 16px;
        cursor: pointer;
        
      }

      .truncado{
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Aquí le dices que máximo sean 3 líneas */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .link {
        width: fit-content;
        text-align: center;
        text-decoration: none;
        color: #474747;
        font-weight: 700;
        padding: 0.5rem 1.5rem 0.5rem 1.5rem;
        letter-spacing: 1px;
        border: 1px solid #474747;
      }

      .link:hover{
        background: #bf251e;
        color: white;
        border: 0px;
      }
      
      a{
          text-decoration: none;
          color: #fe0000;
      }
    }
  }
}

@media (min-width: 1024px) {
  .section-father {
    grid-template-columns: 1.5fr 1fr;

    .detailsContainer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 6.5rem;

      .containerTitle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        img {
          width: 100%;
        }
        h2 {
          font-size: 27px;
          margin-bottom: 3rem;
          letter-spacing: 1px;
          color: #474747;
        }
      }
    }

    .container-cards {
      max-height: 90vh;
      overflow: hidden;
      overflow-y: auto;
      .card {
        flex-direction: row;
        gap: 1rem;
        margin-top: 2rem;
        max-height: 80%;

        img {
          width: 55%;
          height: 55%;
        }
        .information {
          padding: 0.5rem;

          h2 {
            letter-spacing: 1px;
          }
          p {
            font-size: 14px;
          }
        }
      }
    }
  }
}