/***************************** Activities ******************************/

.activities {
  margin: 70px 30px;

  @media (max-width: 767.98px) {
    padding: 0 20px;
    margin: 20px 0px 60px 0px;
  }

  .activities-cards {
    display: flex;
    flex-direction: row;
    gap: clamp(10px, 2vw, 40px);
    padding-top: 33px;

    @media (max-width: 767.98px) {
      flex-direction: column;
      gap: 30px;
    }

    a {
      flex: 1;
      display: flex;

      .card {
        /* pour que .card remplisse toute la hauteur disponible dans son parent <a> */
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: column;
        padding: 0;

        img {
          height: 380px;
          width: 100%;
          border-radius: 13px 13px 0px 0px;
       
          @media (max-width: 1024px) {
            height: 230px;
          }

          @media (max-width: 767.98px) {
            height: 180px;
          }
        }

        .card-content {
          padding: 15px;
          box-sizing: border-box;
          /* Centrage du contenu de la légende de la carte */
          flex: 1; /* Permet au contenu de la légende de la carte de prendre tout l'espace disponible restant après l'image */
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }
}

/* CSS classique, pour le validator W3, car il ne comprends pas le nesting === checked */

/* .activities {
  margin: 70px 30px;
}

@media (max-width: 767.98px) {
  .activities {
    padding: 0 20px;
    margin: 20px 0px 60px 0px;
  }
}

.activities .activities-cards {
  display: flex;
  flex-direction: row;
  gap: clamp(10px, 2vw, 40px);
  padding-top: 33px;
}

@media (max-width: 767.98px) {
  .activities .activities-cards {
    flex-direction: column;
    gap: 30px;
  }
}

.activities .activities-cards a {
  flex: 1;
  display: flex;
}

.activities .activities-cards a .card {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  padding: 0;
}

.activities .activities-cards a .card img {
  height: 380px;
  width: 100%;
  border-radius: 13px 13px 0px 0px;
}

@media (max-width: 1024px) {
  .activities .activities-cards a .card img {
    height: 230px;
  }
}

@media (max-width: 767.98px) {
  .activities .activities-cards a .card img {
    height: 180px;
  }
}

.activities .activities-cards a .card .card-content {
  padding: 15px;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
} */