@import url('../../styles/jarallax.min.css');

:root {
  --parallax-container-height: 440px;
  --parallax-dark-theme-gradient: linear-gradient(to right, rgb(0 0 0 / 75%) 0%, rgb(0 0 0 / 0%) 89%);
  --parallax-content-max-width-mobile-s: 528px;
  --parallax-dark-theme-content-max-width: 770px;
  --parallax-light-theme-content-max-width: 560px;
}

.image-parallax-scrolling-container {
  .image-parallax-scrolling-wrapper {
    padding: 0;
    max-width: unset;
  }
}

.image-parallax-scrolling-content-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 0;
  z-index: 1;
  padding: 0 var(--spacing-xmsmall);

  .image-parallax-scrolling-content {
    > .button {
      margin-top: var(--spacing-medium);
    }
  }
}

.image-parallax-scrolling-content-holder {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--width-xlarge);
  padding-top: var(--spacing-xsmall);
  padding-bottom: var(--spacing-xsmall);
  box-sizing: border-box;
  height: 100%;

  @media (width >= 320px) {
    padding-left: var(--spacing-xmsmall);
  }

  @media (width >= 768px) {
    padding-left: 0;
  }
}

.image-parallax-scrolling-content {
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0 auto;

  @media (width >= 576px) {
    max-width: var(--parallax-content-max-width-mobile-s);
  }

  @media (width >= 768px) {
    margin: 0 0 0 11.2333%
  }

  @media (width >= 992px) {
    margin: 0 0 0 9.9333%;
  }

  @media (width >= 1200px) {
    margin: 0 0 0 10.6333%;
  }

  @media (width >= 1300px) {
    margin: 0 0 0 11.4333%;
  }

  @media (width >= 1400px) {
    margin: 0 0 0 5.1333%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 var(--spacing-xsmall);
  }

  .image-parallax-scrolling-headline {
    margin-bottom: 8px;

    * {
      font-weight: var(--font-weight-800);
    }

    h2,
    h3,
    p {
      font-size: var(--body-font-size-xxl);
      line-height: var(--heading-line-height-s);

      @media (width >= 768px) {
        font-size: var(--body-font-size-2xl-3xl);
        line-height: var(--heading-line-height-xl);
      }

      @media (width >= 1400px) {
        font-size: var(--body-font-size-2xl-3xl-xxxl);
      }
    }
  }

  .image-parallax-scrolling-text {
    * {
      &:not(.button) {
        font-size: var(--body-font-size-s);
        line-height: var(--body-line-height-m);
      }
    }
  }
}

.image-parallax-scrolling-holder {
  height: var(--parallax-container-height);
  overflow: hidden;

  &.theme-dark {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: var(--parallax-dark-theme-gradient);
    }

    .image-parallax-scrolling-content {
      color: var(--color-neutral-50);

      @media (width >= 768px) {
        max-width: 468px;
      }

      @media (width >= 992px) {
        max-width: 627px;
      }

      @media (width >= 1200px) {
        max-width: 748px;
      }

      @media (width >= 1400px) {
        max-width: 758px;
      }
    }
  }

  &.theme-light {
    .image-parallax-scrolling-content {
      background-color: var(--color-neutral-50);
      padding: var(--spacing-big) var(--spacing-xbig);

      @media (width >= 768px) {
        max-width: 468px;
      }

      @media (width >= 992px) {
        max-width: 560px;
      }
    }
  }
}