.articles {

  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  align-items: flex-start;
  position: relative;

}

.articles.no-result {

  grid-template-columns: repeat(1, 1fr);
  min-height: 25vh;

  p {
    font-size: 1rem;
    line-height: 1.4rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--bg-fake-white);
  }

}

@media only screen and (max-width: 1023px)  {

  .articles {

    grid-template-columns: repeat(3, 1fr);

  }

}

@media only screen and (max-width: 700px)  {

  .articles,
  #articles-container .articles {

    grid-template-columns: repeat(1, 1fr) !important;

  }

}