.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.year-button {  
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            color: white;
            background-color: #070D3B; /* Color inicial del botón */
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;
                    }
    
.year-active { 
            background-color: #1B2DB5; color: white; 
                     }
        
.year-buttons.year-active {
            background-color: #1B2DB5; /* Color crema */
            color: white; /* Texto negro cuando está activo */
                    }
            
.year-buttons.year-2024-active {
           background-color: #1B2DB5; /* Color azul oscuro para el botón 2024 */
            color: white; /* Texto blanco para el botón de 2024 */
                    }

.month-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.month-button {
  padding: 10px 15px;
  margin: 5px;
  background-color: #070d3b;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.month-button.month-active {
  background-color: #1B2DB5; /* Color de fondo cuando el botón está activo */
  color: white; /* Color del texto cuando el botón está activo */
  border-color: #1B2DB5; /* Color del borde cuando el botón está activo */
}

.news-container {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajusta el tamaño mínimo y máximo de las columnas */
  justify-items: center; /* Centra los elementos dentro de las columnas */
}

.news-article {
  border: 1px solid #cccccc;
  padding: 15px;
  margin-bottom: 10px;
  width: 100%; /* Asegura que el ancho sea del 100% del contenedor */
  max-width: 300px; /* Define un ancho máximo para los artículos */
}

.news-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.news-description {
  margin-bottom: 10px;
}

@media (min-width: 768px) {
  .news-container {
    grid-template-columns: repeat(3, 1fr); /* Cambia a 3 columnas en pantallas más grandes */
  }
}