.component.newslist .article-list.wall {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  display: grid;
  grid-gap: 25px;
  grid-auto-rows: 250px;
  grid-template-columns: 1fr;
}
.component.newslist .article-list.list article {
  height: 250px;
}
.component.newslist .article-list.wall,
.component.newslist .article-list.list {
  /* wall */
}
@media (max-width: 1170px) {
  .component.newslist .article-list.wall,
  .component.newslist .article-list.list {
    padding: 0 15px;
  }
}
.component.newslist .article-list.wall article,
.component.newslist .article-list.list article {
  flex-basis: 33%;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  background-size: 0px;
  transform: scale(1);
  background: #fff;
  display: flex;
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}
.component.newslist .article-list.wall article a,
.component.newslist .article-list.list article a {
  display: grid;
  width: 100%;
  grid-gap: 25px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.component.newslist .article-list.wall article a div.image,
.component.newslist .article-list.list article a div.image {
  display: flex;
  overflow: hidden;
}
.component.newslist .article-list.wall article a div.image div,
.component.newslist .article-list.list article a div.image div {
  flex-grow: 1;
  transition: transform .1s;
  background-size: cover;
  background-position: center center;
}
.component.newslist .article-list.wall article a div.info,
.component.newslist .article-list.list article a div.info {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  position: relative;
  transition: background .1s;
  padding: 25px;
}
.component.newslist .article-list.wall article a div.info h3,
.component.newslist .article-list.list article a div.info h3 {
  font-weight: 300;
  color: #333333;
  text-indent: 0;
  text-decoration: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
.component.newslist .article-list.wall article a div.info h3 em,
.component.newslist .article-list.list article a div.info h3 em {
  letter-spacing: 0;
}
.component.newslist .article-list.wall article a div.info p.date,
.component.newslist .article-list.list article a div.info p.date {
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  margin: 10px 0;
}
.component.newslist .article-list.wall article a div.info p.by,
.component.newslist .article-list.list article a div.info p.by,
.component.newslist .article-list.wall article a div.info p.description,
.component.newslist .article-list.list article a div.info p.description {
  display: none;
}
.component.newslist .article-list.wall article.card-bg-grey,
.component.newslist .article-list.list article.card-bg-grey {
  background: #f3f3f3;
}
.component.newslist .article-list.wall article.card-bg-red,
.component.newslist .article-list.list article.card-bg-red {
  background: #e00122;
  color: #fff;
}
.component.newslist .article-list.wall article.card-bg-red a div.info h3,
.component.newslist .article-list.list article.card-bg-red a div.info h3 {
  color: #fff;
}
.component.newslist .article-list.wall article.card-bg-black,
.component.newslist .article-list.list article.card-bg-black {
  background: #000;
  color: #fff;
}
.component.newslist .article-list.wall article.card-bg-black a div.info h3,
.component.newslist .article-list.list article.card-bg-black a div.info h3 {
  color: #fff;
}
.component.newslist .article-list.wall article.emergency,
.component.newslist .article-list.list article.emergency {
  grid-template-columns: 1fr !important;
}
.component.newslist .article-list.wall article.emergency a div.info,
.component.newslist .article-list.list article.emergency a div.info {
  border-left: 20px solid #e00122;
  margin-left: 0 !important;
}
.component.newslist .article-list.wall article.emergency a .title em,
.component.newslist .article-list.list article.emergency a .title em {
  font-weight: bold;
}
.component.newslist .article-list.wall article.emergency .image,
.component.newslist .article-list.list article.emergency .image {
  display: none !important;
}
.component.newslist .article-list.wall article.grid-article-square-small a div.image,
.component.newslist .article-list.list article.grid-article-square-small a div.image,
.component.newslist .article-list.wall article.grid-article-square-large a div.image,
.component.newslist .article-list.list article.grid-article-square-large a div.image {
  display: none;
}
.component.newslist .article-list.wall article.grid-article-square-small a div.info h3,
.component.newslist .article-list.list article.grid-article-square-small a div.info h3 {
  font-size: 1.2em;
}
@media (min-width: 768px) {
  .component.newslist .article-list.wall article.grid-article-square-small a div.info h3,
  .component.newslist .article-list.list article.grid-article-square-small a div.info h3 {
    font-size: 0.8em;
  }
}
.component.newslist .article-list.wall article.grid-article-square-large a,
.component.newslist .article-list.list article.grid-article-square-large a {
  background-size: cover;
  background-position: right center;
}
.component.newslist .article-list.wall article.grid-article-square-large a div.info,
.component.newslist .article-list.list article.grid-article-square-large a div.info {
  justify-content: center;
  padding: 50px;
}
.component.newslist .article-list.wall article.grid-article-square-large a div.info h3,
.component.newslist .article-list.list article.grid-article-square-large a div.info h3 {
  font-size: 48px;
}
.component.newslist .article-list.wall article.grid-article-square-large a:nth-child(3n),
.component.newslist .article-list.list article.grid-article-square-large a:nth-child(3n) {
  background-image: url(wall/images/no-photo-news1.png);
}
.component.newslist .article-list.wall article.grid-article-square-large a:nth-child(3n+1),
.component.newslist .article-list.list article.grid-article-square-large a:nth-child(3n+1) {
  background-image: url(wall/images/no-photo-news2.png);
}
.component.newslist .article-list.wall article.grid-article-square-large a:nth-child(3n+2),
.component.newslist .article-list.list article.grid-article-square-large a:nth-child(3n+2) {
  background-image: url(wall/images/no-photo-news3.png);
}
.component.newslist .article-list.wall article.grid-article-square-large:hover a,
.component.newslist .article-list.list article.grid-article-square-large:hover a,
.component.newslist .article-list.wall article.grid-article-square-large:focus a,
.component.newslist .article-list.list article.grid-article-square-large:focus a {
  background-image: none;
}
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-small a div.image,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-small a div.image,
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-large a div.image,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-large a div.image {
  display: flex;
}
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-small a div.image div,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-small a div.image div,
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-large a div.image div,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-large a div.image div {
  background-size: cover;
}
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-small a div.image img,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-small a div.image img,
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-large a div.image img,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-large a div.image img {
  display: none;
}
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-small a div.info h3,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-small a div.info h3,
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-large a div.info h3,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-large a div.info h3 {
  font-size: 22px;
}
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-small a,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-small a {
  grid-template-columns: 1fr 1fr;
}
.component.newslist .article-list.wall article.grid-article-rectangle-horizontal-large a,
.component.newslist .article-list.list article.grid-article-rectangle-horizontal-large a {
  grid-template-columns: 2fr 1fr;
}
.component.newslist .article-list.wall article.grid-article-rectangle-vertical-small a,
.component.newslist .article-list.list article.grid-article-rectangle-vertical-small a {
  grid-template-rows: 1fr 1fr;
}
.component.newslist .article-list.wall article.grid-article-rectangle-vertical-small a div.info,
.component.newslist .article-list.list article.grid-article-rectangle-vertical-small a div.info {
  margin-top: -25px;
}
.component.newslist .article-list.wall article.grid-article-rectangle-vertical-small a div.info h3,
.component.newslist .article-list.list article.grid-article-rectangle-vertical-small a div.info h3 {
  font-size: 22px;
}
.component.newslist .article-list.wall article:hover,
.component.newslist .article-list.list article:hover,
.component.newslist .article-list.wall article:focus,
.component.newslist .article-list.list article:focus {
  transform: scale(1.05);
  z-index: 9;
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
  background-image: none !important;
  background: #e00122;
}
.component.newslist .article-list.wall article:hover a,
.component.newslist .article-list.list article:hover a,
.component.newslist .article-list.wall article:focus a,
.component.newslist .article-list.list article:focus a {
  background-image: none;
  text-decoration: none;
}
.component.newslist .article-list.wall article:hover a div.image div,
.component.newslist .article-list.list article:hover a div.image div,
.component.newslist .article-list.wall article:focus a div.image div,
.component.newslist .article-list.list article:focus a div.image div {
  transform: scale(1.1);
  transition: transform 1s;
}
.component.newslist .article-list.wall article:hover a div.info h3,
.component.newslist .article-list.list article:hover a div.info h3,
.component.newslist .article-list.wall article:focus a div.info h3,
.component.newslist .article-list.list article:focus a div.info h3,
.component.newslist .article-list.wall article:hover a div.info a,
.component.newslist .article-list.list article:hover a div.info a,
.component.newslist .article-list.wall article:focus a div.info a,
.component.newslist .article-list.list article:focus a div.info a,
.component.newslist .article-list.wall article:hover a div.info p,
.component.newslist .article-list.list article:hover a div.info p,
.component.newslist .article-list.wall article:focus a div.info p,
.component.newslist .article-list.list article:focus a div.info p {
  color: #fff;
}

.component.newslist .article-list.wall,
.component.newslist .article-list.list {
  grid-auto-rows: auto;
}
.component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'],
.component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] {
  /* base 
            [ ]
            [ ]
            [ ]

            */
  grid-template-columns: 1fr !important;
}
.component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a,
.component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr 1fr;
  grid-gap: 0;
}
.component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a .info,
.component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a .info {
  margin-left: 0;
}
.component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a .info h3,
.component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a .info h3 {
  font-size: 1.2em;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a .info h3,
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a .info h3 {
    font-size: 0.8em;
  }
}
.component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a .info .date,
.component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a .info .date {
  font-size: 12px;
}
@media (min-width: 450px) {
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'],
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] {
    /* supersmall */
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a,
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr;
  }
}
@media (min-width: 768px) {
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'],
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] {
    /* md 
                [ `[ ]
                , ][ ]

                */
    grid-auto-rows: 170px;
    grid-template-columns: 1fr 1fr !important;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a,
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr;
    grid-gap: 25px;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a div.info,
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article a div.info {
    margin-left: -25px;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(1),
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(1) {
    grid-area: 1/1/3/2;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(1) a div.info h3,
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(1) a div.info h3 {
    font-size: 1em;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(2),
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(2) {
    grid-area: 1/2/2/3;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(3),
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(3) {
    grid-area: 2/2/3/3;
  }
}
@media (min-width: 1200px) {
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'],
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] {
    /* lg 
                [   `[ ]
                ,   ][ ]

                */
    grid-template-columns: 2fr 1fr !important;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article div.info .date,
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article div.info .date {
    font-size: 14px;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(1),
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(1) {
    grid-area: 1/1/3/2;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(1) div.info h3,
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(1) div.info h3 {
    font-size: 2em;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(2),
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(2) {
    grid-area: 1/2/2/3;
  }
  .component.newslist .article-list.wall[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(3),
  .component.newslist .article-list.list[data-card-style='forceCSS'][data-force-css-style='3-featured'] article:nth-child(3) {
    grid-area: 2/2/3/3;
  }
}