.article-list {
  max-width: 421px;
  width: 100%;
  height: 265px;
  display: block;
  background: no-repeat center center / 120%;
  color: #fff;
  text-decoration: none;
  margin: 0 15px 15px 0;
  font-weight: 500;
  font-family: "Roboto";
  transition: 0.2s;
  position: relative;
}
.article-list:hover {
  background-size: 130%;
}
.article-list:nth-child(2n) {
  margin-right: 0;
}
@media (max-width: 1170px) {
  .article-list {
    margin-right: 0;
  }
}
.article-list .overlay {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  padding: 75px 20px 0;
  transition: 0.2s;
}
.article-list .overlay:hover {
  background: rgba(0, 0, 0, 0.6);
}
.article-list .title {
  font-size: 27px;
  margin: 0 0 20px;
  line-height: 30px;
  min-height: 90px;
}
.article-list .info {
  position: absolute;
  bottom: 20px;
  width: calc(100% - 20px * 2);
}
.article-list .info .viewcount {
  background: url("/usertpl/i/view-w.svg") no-repeat left center / contain;
  padding-left: 30px;
}
.article {
  margin: -9px 0 40px;
}
@media (max-width: 1170px) {
  .article {
    margin: 0 0 40px;
  }
}
.article .siblings {
  background: #f2f2f2;
  padding: 24px;
  margin: 40px 0;
}
.article .siblings .link {
  margin-bottom: 10px;
  display: block;
}
.article .cols {
  padding: 30px 0;
}
@media (max-width: 1170px) {
  .article .cols {
    padding: 30px 10px;
  }
}
.article .way {
  color: #31353F;
  margin: 7px 0 36px;
}
.article .way a {
  color: inherit;
}
.article .ginfoline .params {
  width: auto;
}
.article .content {
  margin: 0 0 20px;
}
.popblog .article-list {
  max-width: 270px;
  height: 237px;
  background-size: 160%;
  margin: 0;
}
.popblog .article-list:hover {
  background-size: 180%;
}
.popblog .article-list .overlay {
  padding: 139px 30px 0;
}
.popblog .article-list .title {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
  min-height: auto;
}
.popblog .article-list .info {
  width: calc(100% - 30px * 2);
  line-height: 20px;
}
.popblog .article-list .info .pubdate {
  font-weight: 600;
  font-size: 10px;
}
.popblog .article-list .info .viewcount {
  padding-left: 20px;
  font-size: 10px;
  background-size: 15px;
}
@media (max-width: 1170px) {
  .popblog .article-list {
    max-width: 100%;
  }
}
