.news-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
  }
}

@media screen and (max-width: 1024px) {
  .news-list {
    ul {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

@media screen and (max-width: 768px) {
  .news-list {
    gap: 30px;

    ul {
      grid-template-columns: 1fr 1fr;
    }
  }
}

@media screen and (max-width: 550px) {
  .news-list {
    gap: 20px;

    ul {
      grid-template-columns: 1fr;
    }
  }
}