body:has(.swk-hero-section .swk-hero--start-from-top) .section-header {
  & .swk-header-section {
    --color-foreground: 255, 251, 246;
    background: transparent;
  }

  &.scrolled-past-header .swk-header-section {
    --color-foreground: 23, 23, 23;
    background-color: rgb(var(--color-background));
  }
}

.swk-hero-section:has(.swk-hero--start-from-top) {
  margin-top: -12rem;

  & .swk-hero {
    height: calc(95vh - 16rem + 11.5rem);
  }
}

.swk-hero {
  width: 100%;
  height: calc(95vh - 16rem);
  position: relative;

  & .swk-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    display: block;

    position: absolute;
    inset: 0;
  }

  & .swk-hero__image--mobile {
    display: none;
  }

  @media screen and (max-width: 900px) {
    &:has(.swk-hero__image--mobile) .swk-hero__image--desktop {
      display: none;
    }

    & .swk-hero__image--mobile {
      display: block;
    }
  }
}

.swk-hero__content-wrapper {
  width: 100%;
  height: 100%;
  padding-block: 5rem;

  display: grid;
  place-items: center;
  text-align: center;

  &.bottom_left {
    text-align: start;
    align-content: end;
    justify-content: start;
  }

  &.bottom_right {
    text-align: end;
    align-content: end;
    justify-content: end;
  }
}

.swk-hero__content {
  max-width: 50rem;

  &.white {
    color: var(--color-white);
  }

  &.black {
    color: var(--color-black);
  }

  & > * {
    margin: 0;
  }

  & h1,
  & p {
    color: inherit;
  }

  & h1 {
    margin-bottom: 1rem;
  }

  & p {
    margin-bottom: 3.6rem;
  }
}