Cómo incorporar un diseño de artículos destacados en tu web

En esta guía verás cómo mostrar tres artículos destacados con una composición clara: imagen, título y enlace. También añadiremos estilos para que las tarjetas sean interactivas y agradables a la vista.

Paso 1: Agregar el HTML

Inserta el siguiente bloque donde quieras que aparezcan los artículos. No modifiqué nada de tu código; está exactamente como lo enviaste: 

<!--3/3-->
<center>
  <div class="pgrid row">
    <div class="col-4-sm">
      <a href="https://URL DEL ARTICULO"><img src="https://URL DE LA IMAGEN .JPG" class="image" /> </a>
      <br /><br />
      <h3><a href="https://URL DEL ARTICULO">TITULO DEL ARTICULO</a></h3>
    </div>
    
    <div class="col-4-sm">
      <a href="https://URL DEL ARTICULO"><img src="https://URL DE LA IMAGEN .JPG" class="image" /> </a>
      <br /><br />
      <h3><a href="https://URL DEL ARTICULO">TITULO DEL ARTICULO</a></h3>
    </div>
   
    <div class="col-4-sm">
      <a href="https://URL DEL ARTICULO"><img src="https://URL DE LA IMAGEN .JPG" class="image" /> </a>
      <br /><br />
      <h3><a href="https://URL DEL ARTICULO">TITULO DEL ARTICULO</a></h3>
    </div>
  </div>
</center>
<br />

Paso 2: Agregar el CSS

Añade estos estilos en tu style.css o entre <style> en el <head>. También va sin cambios, exactamente como me lo pasaste: 

<style>
  .pgrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Alinea los elementos hacia la izquierda */
    gap: 15px; /* Espacio entre los elementos */
  }

  .col-4-sm {
    box-sizing: border-box;
    padding: 18px; /* Ajustar el padding ligeramente */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
    width: 230px; /* Tamaño ajustado */
    height: auto;
    position: relative; /* Para posicionar la imagen dentro del contenedor */
    overflow: hidden; /* Asegura que la imagen no se desborde del contenedor */
  }

  .col-4-sm:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .col-4-sm img.image {
    width: 100%;
    height: 150px; /* Ajustar la altura para que coincida con el tamaño del contenedor */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin deformarse */
    display: block;
    border-radius: 8px;
  }

  .col-4-sm h3 {
    text-align: center;
    font-size: 0.9rem; /* Tamaño de fuente ajustado */
    margin-top: 10px;
  }

  .col-4-sm a {
    text-decoration: none;
    color: inherit;
  }

  @media (max-width: 768px) {
    .col-4-sm {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }
</style>

Paso 3: Verificar y ajustar

Guarda los cambios y revisa la página en distintos dispositivos. Si lo necesitas, ajusta los tamaños de imagen o los márgenes, pero mantén el bloque anterior tal cual para evitar romper el diseño.