/* News page */

.news-page {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
flex-flow: column;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}

.news-hero-bg {
height: 100vh;
left: 0px;
margin: 0px;
position: fixed;
top: 0px;
transition-delay: 500ms;
transition-duration: 2000ms;
transition-timing-function: var(--ease-bounce);
width: 100%;
z-index: -1;
}

.news-hero-bg::before {
filter: brightness(0.8);
}

.news-page__main {
transform: translate(0px, 0px);
transition-delay: 800ms;
transition-duration: 1000ms;
width: 100%;
}

.news-page__content {
place-content: center;
padding: 0px;
width: 100%;
}

/* Hero */

.news-hero {
place-content: center flex-start;
align-items: center;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
flex-flow: column;
padding: 192px 0px;
width: 100%;
}

.news-hero__inner {
place-content: flex-start space-between;
align-items: flex-start;
flex-flow: column;
margin: 0px;
padding: 0px 48px;
transition-delay: 800ms;
transition-duration: 1000ms;
max-width: 1280px;
width: 100%;
}

.news-hero__title {
color: var(--color-white);
font-family: var(--font-heading);
font-size: 72px;
font-weight: 600;
line-height: 1;
margin: 0px 0px 24px;
text-align: left;
transition-delay: 800ms;
transition-duration: 1000ms;
}

.news-hero__subtitle {
color: var(--color-white);
font-family: var(--font-sans);
font-size: var(--fs-2xl);
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.6;
margin: 0px;
text-align: left;
transition-delay: 1000ms;
transition-duration: 800ms;
z-index: 1;
}

/* Article list */

.news-list {
place-content: center flex-start;
align-items: center;
background: rgb(248, 247, 246);
flex-flow: column;
padding: 96px 48px;
transition-delay: 400ms;
transition-duration: 1200ms;
width: 100%;
}

.news-list__heading {
color: var(--color-primary);
font-family: var(--font-sans);
font-size: var(--fs-3xl);
font-weight: 600;
line-height: 1.4;
margin: 0px;
text-align: left;
transition-delay: 300ms;
transition-duration: 1000ms;
}

.news-list__tags {
place-content: flex-start;
align-items: flex-start;
flex-flow: column;
margin: 0px 0px 24px;
padding: 24px 48px;
max-width: 1280px;
width: 100%;
}

.news-list__tags-inner {
place-content: flex-start center;
align-items: flex-start;
flex-flow: wrap;
margin: 0px;
padding: 0px;
width: 100%;
}

.news-list__articles {
place-content: center space-between;
align-items: center;
flex-flow: column;
margin: 0px;
padding: 0px 48px;
max-width: 1280px;
width: 100%;
}

.news-list__articles-inner {
place-content: stretch flex-start;
align-items: stretch;
flex-flow: wrap;
margin: 0px;
width: 100%;
}

/* Breadcrumb */

.news-breadcrumb {
place-content: center flex-start;
align-items: center;
background: rgb(248, 247, 246);
flex-flow: column;
padding: 24px 0px;
width: 100%;
}

.news-breadcrumb__list {
place-content: center flex-start;
align-items: center;
flex-flow: row;
margin: 0px;
overflow: auto hidden;
padding: 0px 48px;
transition-delay: 800ms;
transition-duration: 1000ms;
max-width: 1280px;
width: 100%;
}

.news-breadcrumb__link {
color: var(--color-gray);
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.4;
margin: 0px;
text-align: left;
transition-duration: 600ms;
}

.news-breadcrumb__link:hover {
opacity: 0.5;
}

.news-breadcrumb__separator {
color: var(--color-primary);
font-size: var(--fs-base);
margin: 0px 12px;
max-width: calc(100% - 24px);
}

.news-breadcrumb__current {
color: var(--color-primary);
font-family: var(--font-heading);
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.4;
margin: 0px;
text-align: left;
transition-delay: 300ms;
transition-duration: 1000ms;
}

.image[data-img="news-hero-bg"]::before {
background-image: url(/images/news-hero-bg.webp);
}

@media screen and (max-width: 840px) {
.news-hero__title {
  font-size: 64px;
  }

.news-hero__subtitle {
  font-size: var(--fs-xl);
  }

.news-list {
  padding: 96px 24px;
  }

.news-list__heading {
  font-size: 32px;
  }

.news-list__tags {
  padding: 24px;
  }

.news-list__articles {
  padding: 0px;
  }
}

@media screen and (max-width: 540px) {
.news-hero {
  padding: 96px 0px;
  }

.news-hero__inner {
  padding: 0px 24px;
  }

.news-hero__title {
  font-size: var(--fs-4xl);
  margin: 0px 0px 12px;
  }

.news-hero__subtitle {
  font-size: var(--fs-md);
  }

.news-list {
  padding: 48px 24px;
  }

.news-list__heading {
  font-size: var(--fs-xl);
  }

.news-list__tags {
  margin: 0px;
  padding: 24px 0px;
  }

.news-breadcrumb__list {
  padding: 0px 24px;
  }

.news-breadcrumb__separator {
  margin: 0px 6px;
  max-width: calc(100% - 12px);
  }
}