/**
 * Hero teaser grid component style.
 * Displays Hero teasers in occurences of 1, 3 or 5.
 * First teaser (large) is displayed fullwidth.
 */
.hero-teaser-grid {
  padding: 0;
}
@media (min-width: 500px) and (max-width: 1079px) {
  .hero-teaser-grid {
    padding: 0 2.1875rem;
  }
}
@media (min-width: 1080px) {
  .hero-teaser-grid {
    padding: 0;
  }
}
.hero-teaser-grid__first-inner {
  width: 100%;
  background-color: var(--c-grayscale-off-white);
  transition: background-color var(--easing);
}
.hero-teaser-grid__first-inner:hover {
  background-color: var(--c-grayscale-off-white-darker);
}
.hero-teaser-grid__first-inner:hover .hero-teaser {
  background-color: var(--c-grayscale-off-white-darker);
}
.hero-teaser-grid__first-inner--bg-dark {
  background-color: var(--c-brand-secondary);
}
.hero-teaser-grid__first-inner--bg-dark:hover {
  background-color: var(--c-brand-secondary-darker);
}
.hero-teaser-grid__first-inner--bg-dark:hover .hero-teaser {
  background-color: var(--c-brand-secondary-darker);
}
.hero-teaser-grid .hero-teaser--large {
  max-width: var(--w-full);
  margin: 0 auto;
}
.hero-teaser-grid__items {
  display: grid;
  gap: var(--s-md);
  max-width: var(--w-full);
  margin: var(--s-md) auto;
  background-color: #fff;
}
@media (min-width: 768px) {
  .hero-teaser-grid__items {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-lg);
    margin-top: var(--s-lg);
  }
}
@media (min-width: 980px) {
  .hero-teaser-grid__items {
    gap: var(--s-4xl);
    margin-top: var(--s-4xl);
  }
}