.articles {
  display: grid;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.large-article {
  grid-column: span 2; /* Ocupa dos columnas */
  height: 400px; /* Más destacado */
}

.small-article {
  height: 200px;
}

article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;
  position: relative;
  border-radius: 0px;
  background: #fff;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}

article h2 {
  margin: 0 0 18px 0;
  font-size: 1.5rem;
  color: var(--title-color);
}

article p {
  font-family: 'Verdana', 'Geneva', sans-serif;
  font-size: 16px; /* Tamaño recomendado para párrafos */
  line-height: 1.3; /* Mejora la legibilidad */
  color: #222222; /* Color oscuro para el texto */
}

.article-wrapper {
  display: flex;
  flex-direction: column;
}

figure {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 230px;
  overflow: hidden;
}

.large-article figure {
  height: 300px; /* Imagen más alta */
}

article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--img-scale));
  transition: transform 0.4s ease-in-out;
}

.article-body {
  padding: 10px;
}

article a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #54A5DB;
}

article a .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  transform: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}

article:has(:hover, :focus) {
  --img-scale: 1.1;
  --title-color: #54A5DB;
  --link-icon-translate: 0;
  --link-icon-opacity: 1;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.section-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 0px;
  font-size: 0.8rem;
}

.read-more {
  color: #007bff;
  border: 1px solid #007bff;
  padding: 5px 10px;  /* Ajusté el padding para reducir el espacio */
  border-radius: 4px;
  display: inline-flex; /* Asegura que el texto y la flecha se alineen en la misma línea */
  align-items: center;  /* Centra verticalmente la flecha con el texto */
  font-size: 14px; /* Reduce el tamaño de la fuente */
  transition: all 0.2s ease; /* Efecto más rápido para el cambio */
  justify-content: center; /* Centra el texto dentro del borde */
}

.read-more svg {
  width: 16px;  /* Reduce el tamaño de la flecha */
  height: 16px;
  margin-left: 5px;  /* Espaciado entre el texto y la flecha */
}

.read-more:hover {
  background-color: #007bff;
  color: white;
}

.read-more svg path {
  fill: currentColor; /* Hace que la flecha tome el color del texto */
}

.post-date {
  font-size: 0.9rem;
  color: #888;
  margin: 5px 0 5px;
}

@media (max-width: 768px) {
  article a {
    display: contents;
  }
}