#section_topics {
  display: grid;
  border: 3px solid rgb(255, 255, 255);
  border-radius: 5px;
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0.5em;
  font-size: 1.25em;
}

.all_new_posts {
  display: grid;
  column-gap: 0.5em;
  row-gap: 1em;
}

/* media querys */

@media only screen and (max-width: 767px) {
  /* Reglas CSS para pantallas de celulares */
  /* red */
  #section_topics {
    grid-template-columns: repeat(2, 1fr);
  }

  .all_new_posts {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto, 1fr);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Reglas CSS para tablets */
  /* purple */
  #section_topics {
    grid-template-columns: repeat(3, 1fr);
  }

  .all_new_posts {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto, 1fr);
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  /* Reglas CSS para laptops */
  /* green */
  #section_topics {
    grid-template-columns: repeat(4, 1fr);
  }

  .all_new_posts {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto, 1fr);
  }
}

@media only screen and (min-width: 1200px) {
  /* Reglas CSS para monitores ultra wide */
  /* yellow */
  #section_topics {
    grid-template-columns: repeat(5, 1fr);
  }

  .all_new_posts {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(auto, 1fr);
  }
}