:root {
  --ifm-hero-background-color: var(--ifm-background-surface-color);
  --ifm-hero-text-color: var(--ifm-color-emphasis-800);
}

.hero {
  align-items: center;
  background-color: var(--ifm-hero-background-color);
  color: var(--ifm-hero-text-color);
  display: flex;
  padding: 4rem 2rem;

  &.hero--primary {
    --ifm-hero-background-color: var(--ifm-color-primary);
    --ifm-hero-text-color: var(--ifm-font-color-base-inverse);

    background-color: var(--ifm-hero-background-color); // @compat
    color: var(--ifm-hero-text-color); // @compat
  }

  &.hero--dark {
    --ifm-hero-background-color: #303846;
    --ifm-hero-text-color: var(--ifm-color-white);

    background-color: var(--ifm-hero-background-color); // @compat
    color: var(--ifm-hero-text-color); // @compat
  }

  & .hero__title {
    font-size: 3rem;
  }

  & .hero__subtitle {
    font-size: 1.5rem;
  }

  @media (--ifm-narrow-window) {
    padding-left: 0;
    padding-right: 0;
  }
}