@media screen and (max-width: 1024px) {
    /* Tipografía base más grande en general */
    body {
      font-size: 18px;
    }
  
    header {
      padding: 1rem;
      text-align: center;
      height: auto;
      flex-direction: column;
    }
  
    .logo {
      height: 9vh;
      margin-bottom: 0.5rem;
    }
  
    .blog-entry h2,
    .entry-title {
      font-size: 1.8rem; /* Título grande */
    }
  
    .blog-entry p,
    .blog-entry .date,
    .blog-entry .author,
    .entry-content,
    .entry-date,
    .entry-author {
      font-size: 1.2rem; /* Cuerpo más legible */
      line-height: 1.7;
    }
  
    .pagination form button,
    .pagination a {
      font-size: 1.1rem;
      padding: 0.8rem 1.2rem;
    }
  
    .grid-first,
    .grid-rest {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      height: auto;
    }
  
    .grid-first > div,
    .grid-rest > div {
      width: 100%;
      height: auto;
    }
  
    .blog-container,
    .entry-container {
      padding: 1rem;
      box-sizing: border-box;
    }
  }
  
  @media screen and (max-width: 768px) {
    /* Aún más grande en móviles */
    body {
      font-size: 19px;
    }
  
    .blog-entry h2,
    .entry-title {
      font-size: 2rem;
    }
  
    .blog-entry p,
    .entry-content,
    .blog-entry .date,
    .blog-entry .author,
    .entry-date,
    .entry-author {
      font-size: 0.95rem;
      line-height: 1.5;
    }
  
    .pagination form button,
    .pagination a {
      font-size: 1.2rem;
      padding: 0.9rem 1.4rem;
    }
  
    .logo {
      height: 8vh;
    }
    .extract {
        -webkit-line-clamp: 4;
    }
  }