:root {

  /* use-cases box size */
  --height-news-preview-box-img: 256px;
  /*--height-news-preview-box-content: 394px;*/
  --height-news-preview-box-content: 250px;
  --width-news-preview-box-content: 38rem;

  --subsection-call-to-action-color-top: #ededed;
  --subsection-call-to-action-color-bottom: #ffffff;
}

body {
  background-color: yellow;
}

section#ftf-news {
  flex:1;

  background-color: #ededed;
  /* text-align:center; */
  display: flex;
  flex-direction: column;
}

#newsList {
  flex: 1;

  width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 1fr;
}

@media screen and (max-width: 1279px) {
  #newsList {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

.news-preview-box {
  margin: 0 auto;
  margin-bottom: 2rem;

  display: grid;
  grid-template-rows: var(--height-news-preview-box-img) var(--height-news-preview-box-content) 6rem;
  grid-template-columns: 100%;
  flex-direction: column;
  justify-content: flex-start;
  /* width dictates responsiveness */
  width: var(--width-news-preview-box-content);
  height: max-content;
  background-color: #fff;
  border-radius: 2rem;
  overflow: hidden;
}

.news-preview-box .date {
  color: var(--color-light-grey05);
  line-height: 2rem;
}

.news-preview-box .tags {
  color: var(--color-butterfly-blue);
  text-transform: uppercase;
  font-weight: bold;

}

.news-preview-box.news-private {
  background-color: #e4ebbc;
}

.news-preview-box .banner {
  width: 100%;
  height: 100%;
  overflow:hidden;
  position: relative;
}


.news-preview-box .banner img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}


.news-preview-box .body {
  padding: 1.5rem 1.5rem 0 1.5rem;
  text-align: left;
  text-wrap: pretty;
  display: flex;
  flex-direction: column;
}


.news-preview-box .body .text-preview {
  height: 100%;
  font-size: 1.2rem;
  line-height: 2rem;
  overflow-y: hidden;
}

.news-preview-box .footer {
  box-shadow: #fff 0px -10px 40px 20px;
  margin-top: auto;
  padding: 0 3rem 3rem 3rem;
  text-align: left;
}

.news-preview-box .pill-button {
  width:75%;
  box-shadow: none;
  margin-top:1rem;
}

#pageSelect {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.controls .button-scroll {
  border: none;
  color: var(--color-light-grey05);
  font-size: 3rem;
}

.controls {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls span {
  font-size: 1.8rem;
  letter-spacing: .25rem;
  font-weight: 600;
  margin: 0 2rem;
}

.controls .button-scroll {
  text-decoration: none;
}

.controls .button-scroll.disabled {
  color: var(--color-light-grey10);
  pointer-events: none;
}

.controls .button-scroll:hover {
  cursor: pointer;
}

.controls span:hover {
  cursor: default;
}

.controls .button-prev:after {
  font-family: "fontawesome";
  content:"\f104";
}

.controls .button-next:after {
  font-family: "fontawesome";
  content:"\f105";
}

.controls .separator {
  width: 1px;
  border: none;
  height: 4rem;
  background-color: #46464a;
}

.news-preview-index .text {
  margin: 0 auto;
  background-color: #515153;
  border-radius: 2rem;
  padding: 0 1rem;
  margin: .5rem 0;
  width: 7rem;
  color: #a19e9d;
  text-align: center;
  font-weight: bold;
}

.news-preview-index .text span:first-child {
  color: #ffffff;
  font-size: 2rem;
}

/* Sections colors */

.use-cases-role .tagline { color: var(--color-by-role); }
.use-cases-role .pill-button { background-color: var(--color-by-role); color: #ffffff;}
.use-cases-vertical .tagline { color: var(--color-by-vertical); }
.use-cases-vertical .pill-button { background-color: var(--color-by-vertical); color: #ffffff;}
.use-cases-data .tagline { color: var(--color-by-data); }
.use-cases-data .pill-button { background-color: var(--color-by-data); color: #ffffff;}