img {
  max-width: 100%;
}
.block-article-page{
	padding: 20px;
    border-radius: 15px;
    background: white;
}

.articles-list {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: dense;
  margin: 20px 0 0;
}
.col-view .articles-list {
  grid-template-columns: repeat(auto-fill, minmax(320px, auto));
}
.list-view .articles-list {
  grid-template-columns: 1fr;
}

.block-article{
	display: flex;
    justify-content: center;
}

.article {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  color: #333;
}
.article-img {
  display:block;
  margin: 0 auto;
  width: auto;
}
.article-content {
  padding: 20px;
  min-height: 170px;
}
.article-title {
  font-size: 16px;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}
.article-intro {
  margin: 0 0 0.5em;
}
.article-date {
  font-size: 12px;
  font-weight: 700;
}
.article-a{
	text-decoration:none;
	color:black;
	transition: all 0.2s linear;
}
.article-a:hover{
	text-decoration:none;
	color:black;
}
@media screen and (min-width: 750px) {
  .list-view .article {
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-areas: "article-img article-content";
  }
  .list-view .article:nth-child(even) {
    grid-template-columns: auto 200px;
    grid-template-areas: "article-content article-img";
  }
  .list-view .article-img {
    grid-area: article-img;
  }
  .list-view .article-content {
    grid-area: article-content;
  }
}
@media screen and (max-width: 500px) {
  .article{
	margin-left: 35px;
    margin-right: 35px;
  }
}
@media screen and (min-width: 500px) {
  .article{
	margin-left: 5px;
    margin-right: 5px;
  }
}