.page-teaser {
  color: #fff;
  display: flex;
  flex-direction: column-reverse;
  transition: background-color var(--easing);
  text-decoration: none;
}
@media (min-width: 1200px) {
  .page-teaser {
    flex-direction: row;
  }
}
.page-teaser:hover.page-teaser--bg-grey, .page-teaser:focus.page-teaser--bg-grey {
  background-color: var(--c-grayscale-off-white-darker);
}
.page-teaser:hover.page-teaser--bg-light, .page-teaser:focus.page-teaser--bg-light {
  background-color: var(--c-brand-secondary-darker);
}
.page-teaser:hover.page-teaser--bg-light .page-teaser__content, .page-teaser:focus.page-teaser--bg-light .page-teaser__content {
  color: #fff;
}
.page-teaser:hover img, .page-teaser:focus img {
  filter: brightness(0.85);
}
.page-teaser--bg-light {
  background-color: var(--c-brand-light);
}
.page-teaser--bg-grey {
  background-color: var(--c-grayscale-off-white);
}
.page-teaser--bg-grey .page-teaser__content {
  color: var(--c-grayscale-dark);
}
.page-teaser--bg-grey .page-teaser__content .headline {
  color: var(--c-brand-secondary);
}
.page-teaser--bg-grey .page-teaser__content .c-link {
  color: var(--c-link);
}
.page-teaser--bg-grey .page-teaser__content .c-link:hover, .page-teaser--bg-grey .page-teaser__content .c-link:focus {
  color: var(--c-link-hocus);
}
.page-teaser .headline {
  color: #fff;
}
.page-teaser .c-link {
  color: #fff;
  text-decoration: underline;
}
@media (min-width: 1200px) {
  .page-teaser .c-link {
    margin-top: auto;
  }
}
.page-teaser .c-link:hover {
  color: #fff;
}
.page-teaser .c-link:focus {
  color: #fff;
}
.page-teaser__content {
  flex-basis: 32%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--s-xl) var(--s-lg) var(--s-3xl) var(--s-lg);
}
@media (min-width: 768px) {
  .page-teaser__content {
    padding: var(--s-4xl);
  }
}
@media (min-width: 1200px) {
  .page-teaser__content {
    padding: var(--s-4xl) var(--s-5xl) var(--s-4xl) var(--s-5xl);
    min-height: 370px;
  }
}
.page-teaser__media {
  flex-basis: 68%;
  width: 100%;
}
.page-teaser__media .c-image {
  height: 180px;
  object-fit: cover;
  object-position: top;
  transition: filter var(--easing);
}
@media (min-width: 768px) {
  .page-teaser__media .c-image {
    height: 360px;
  }
}
@media (min-width: 1200px) {
  .page-teaser__media .c-image {
    height: 100%;
  }
}