Widget:RessourceGrid2

<style>

   /* Styles de base pour la zone de ressources externes */
   .external-resources {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     margin: 1rem 0;
     padding: 0;
     list-style: none;
   }
   .resource-item {
     display: flex;
     align-items: center;
     background-color: #f8f9fa; /* gris très clair */
     border: 1px solid #ddd;
     border-radius: 5px;
     padding: 0.5rem;
     min-width: 200px;
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     transition: background-color 0.2s, transform 0.2s;
     text-decoration: none; /* Pour éviter de souligner le texte */
   }
   .resource-item:hover {
     background-color: #e9ecef; /* gris clair au survol */
     transform: translateY(-2px); /* petit effet de soulèvement */
   }
   .resource-logo {
     max-width: 40px;
     max-height: 40px;
     margin-right: 0.5rem;
   }
   .resource-name {
     font-weight: bold;
   }
   
   .external-resources li {
 list-style-type: none !important;
 padding-left: 0 !important;
 margin-left: 0 !important;

}

   /* Media query : on masque les images si la fenêtre est moins large que 1300px */
   @media (min-width: 400px) and (max-width: 1300px) {
     .resource-logo {
       display: none;
     }
     .resource-item {
       justify-content: center; /* centre le texte horizontalement */
       text-align: center;      /* centre le texte à l'intérieur du conteneur */
       min-width: 160px;
     }
   }
 </style>

<a class="resource-item" href="https://mariavaltorta.com" target="_blank" rel="noopener noreferrer"> <img src="" alt="Fondation Héritière de Maria Valtorta" class="resource-logo" > Fondation Héritière </a>
<a class="resource-item" href="https://www.maria-valtorta.org" target="_blank" rel="noopener noreferrer"> <img src="" alt="Logo maria-valtorta.org" class="resource-logo" > maria-valtorta.org </a>
<a class="resource-item" href="https://indexvaltorta.org" target="_blank" rel="noopener noreferrer"> <img src="" alt="Logo Index Valtorta" class="resource-logo" > Index Valtorta </a>
<a class="resource-item" href="https://mariavaltorta.forumactif.com/" target="_blank" rel="noopener noreferrer"> <img src="" alt="Forum Maria Valtorta" class="resource-logo" > Forum Maria Valtorta </a>