/* RentGuarantor CSS: secondary-header.css (source: src/assets/scss/_secondary-header.scss) */
.secondary-header {
  --secondary-header-bg: var(--color-light-blue-200);
  --secondary-header-stripe: var(--color-light-blue-100);
  background-color: var(--secondary-header-bg);
  height: 400px;
}
.secondary-header__stripe {
  top: 0;
  right: 0;
  bottom: 0;
  left: 25%;
  width: 100%;
  height: 100%;
  background: linear-gradient(152deg, transparent 46.5%, var(--secondary-header-stripe) 46.5%);
  pointer-events: none;
  z-index: 1;
}
.secondary-header__content {
  padding: 36px;
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
}
.secondary-header [data-element=content-column] {
  position: relative;
  z-index: 2;
  max-width: 50%;
}
@media (max-width: 991.98px) {
  .secondary-header [data-element=content-column] {
    max-width: 100%;
  }
}
.secondary-header [data-element=illustration-column] {
  position: relative;
  z-index: 1;
}
@media (max-width: 991.98px) {
  .secondary-header [data-element=illustration-column] {
    align-self: flex-end;
  }
}
.secondary-header h1 {
  font-size: 72px;
  line-height: 87px;
  letter-spacing: -1.44px;
}
.secondary-header [data-element=buttons] {
  margin-top: 36px;
}
.secondary-header [data-element=illustration] {
  max-height: 350px;
  object-fit: contain;
}
@media (max-width: 991.98px) {
  .secondary-header {
    height: 550px;
  }
  .secondary-header__content {
    padding: 32px 20px;
  }
  .secondary-header [data-element=illustration] {
    max-width: 100%;
    margin: 0 auto;
  }
  .secondary-header h1 {
    font-size: 56px;
    line-height: 62px;
    margin-bottom: 24px !important;
  }
  .secondary-header [data-element=buttons] {
    margin-top: 24px;
  }
  .secondary-header__stripe {
    top: auto;
    bottom: -140px;
    left: 0;
  }
}
@media (max-width: 767.98px) {
  .secondary-header h1 {
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 24px !important;
  }
  .secondary-header [data-element=buttons] {
    margin-top: 24px;
  }
  .secondary-header__stripe {
    top: auto;
    bottom: -180px;
    left: 0;
  }
}