.small-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60vh;
  max-height: 70vh;
  overflow: hidden;
  background: var(--color-black);
  color: var(--color-white);
  isolation: isolate;
}

.small-header-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.small-header-bg-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transform: scale(1.02);
}

.small-header-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 9, 0.16) 0%,
    rgba(10, 9, 9, var(--small-header-overlay)) 52%,
    rgba(10, 9, 9, 0.88) 100%
  );
  pointer-events: none;
}

.small-header-container {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: clamp(6rem, 8vw, 9rem) clamp(1rem, 1.8vw, 2rem)
    clamp(3rem, 4vw, 4.5rem);
}

.small-header-subheadline {
  margin: 0 0 0.75rem;
  color: var(--color-white);
  font-family: var(--font-headline);
  font-size: clamp(0.95rem, 1.1vw, 1.25rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.small-header-headline {
  max-width: 62rem;
  margin: 0;
  color: rgba(227, 222, 214, 0.78);
  font-family: var(--font-headline);
  font-size: clamp(3.8rem, 6.4vw, 8.5rem);
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
}

.small-header-text {
  max-width: 48rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.35vw, 1.65rem);
  line-height: 1.35;
}

.small-header-text p {
  margin-bottom: 1.35em;
}

.small-header-text p:last-child {
  margin-bottom: 0;
}

.small-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2rem, 3vw, 3.5rem);
  flex-wrap: wrap;
}

@media (max-width: 1199.98px) {
  .small-header-headline {
    font-size: clamp(3.4rem, 7vw, 7rem);
  }
}

@media (max-width: 991.98px) {
  .small-header {
    min-height: 65vh;
    max-height: none;
  }

  .small-header-container {
    padding-top: clamp(7rem, 18vw, 9rem);
    padding-bottom: clamp(3.5rem, 8vw, 5rem);
  }

  .small-header-headline {
    font-size: clamp(3.2rem, 13vw, 6rem);
  }

  .small-header-text {
    max-width: 40rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 575.98px) {
  .small-header {
    min-height: 70vh;
    min-height: 70svh;
  }

  .small-header-headline {
    font-size: clamp(2.9rem, 14vw, 4.6rem);
  }

  .small-header-actions {
    align-items: stretch;

    max-width: 22rem;
  }

  .small-header-actions .button-main {
    width: fit-content;
  }
}

@media (prefers-reduced-motion: reduce) {
  .small-header-bg-image {
    transform: none !important;
  }
}