.rui-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  min-height: 700px;
  align-items: center;
  padding: 148px 0 116px;
  color: var(--rix-background-hero-foreground, var(--rui-color-white));
  background-color: var(--rix-background-hero-background, var(--rui-color-primary));
  background-image:
    var(--rix-background-hero-overlay),
    var(--rui-hero-background-image, none);
  background-position: center;
  background-size: cover;
}

.rui-hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.rui-hero__content {
  max-width: 700px;
  overflow-wrap: anywhere;
}

.rui-hero__content > :first-child {
  margin-top: 0;
}

.rui-hero__content > :last-child {
  margin-bottom: 0;
}

.rui-hero__content h1 {
  max-width: 680px;
  margin-bottom: 24px;
  color: inherit;
  font-family: var(--rui-font-heading);
  font-size: var(--rui-hero-heading-font-size);
  line-height: var(--rui-hero-heading-line-height);
}

.rui-hero__content h3:first-child {
  margin-bottom: 16px;
  color: inherit;
}

.rui-hero__content p {
  max-width: 620px;
  margin-bottom: 16px;
}

.rui-hero__content a {
  color: inherit;
}

.rui-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.rui-hero .rui-button--secondary {
  --rui-button-secondary-border: var(--rui-color-white);
  --rui-button-secondary-foreground: var(--rui-color-white);
  --rui-button-secondary-hover-border: var(--rui-color-white);
  --rui-button-secondary-hover-background: var(--rui-color-white);
  --rui-button-secondary-hover-foreground: var(--rui-color-dark);
}

@media (max-width: 1024px) {
  .rui-hero {
    min-height: 640px;
  }
}

@media (max-width: 840px) {
  .rui-hero {
    min-height: 520px;
    padding: 124px 0 96px;
  }
}

@media (max-width: 600px) {
  .rui-hero {
    min-height: 480px;
    padding: 108px 0 76px;
    background-position: 38% center;
  }

  .rui-hero__content h1 {
    margin-bottom: 16px;
  }

  .rui-hero__buttons {
    margin-top: 24px;
  }
}