/**
* Below function is responsible to calculate the clamp value based on the received parameters
* $font-size-at-min-width - Required font size at minimum width of viewport
* $font-size-at-max-width - Required font size at minimum width of viewport
* $min-width - Minimum width of viewport
* $max-width - Maximum width of viewport
**/
/**
* Below function is responsible to generate the css variable and add to root.
* $suffix - this will be added to the end of the variable name.
* $variable-list - CSS map for list of required variables which include class/tag names and min/max values.
* $is-clamp-variable - Boolean indicating whether it's to generate clamp variable.
* $breakpoint - If this value is present then breakpoint based list will come.
**/
.page-breaker {
  height: 100%;
}
.page-breaker__background-image {
  height: 100%;
}
.page-breaker__background-image img {
  display: none;
}
.page-breaker__box:nth-child(1) {
  background: var(--stone);
  color: var(--onyx);
}
.page-breaker__box:nth-child(2) {
  background: var(--alloy);
  color: var(--white);
}
.page-breaker__box:nth-child(3) {
  background: var(--white);
  color: var(--copper);
}
.page-breaker--gradient .page-breaker__background-image {
  background: -webkit-gradient(linear, left top, left bottom, from(#d6d0c2), color-stop(84.37%, rgba(214, 208, 194, 0)));
  background: linear-gradient(180deg, #d6d0c2 0%, rgba(214, 208, 194, 0) 84.37%);
}
.page-breaker--gradient .page-breaker__background {
  display: none;
}

@media (min-width: 768px) {
  .page-breaker {
    min-height: 50rem;
    height: 100%;
  }
  .page-breaker__background-image {
    max-height: 82rem;
    min-height: 60rem;
    height: 100%;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 61%, 0% 100%);
            clip-path: polygon(0 0, 100% 0%, 100% 61%, 0% 100%);
  }
  .page-breaker__background-image::after {
    content: "";
    background: -webkit-gradient(linear, left top, left bottom, color-stop(28.57%, rgba(255, 255, 255, 0.9)), color-stop(70.97%, rgba(246, 246, 246, 0))), lightgray -559px -33.632px/138.819% 129.153% no-repeat;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 28.57%, rgba(246, 246, 246, 0) 70.97%), lightgray -559px -33.632px/138.819% 129.153% no-repeat;
    height: 100%;
    width: 100%;
    display: block;
    opacity: 0.48;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
  .page-breaker__background-image img {
    display: block;
  }
  .page-breaker__boxes {
    margin-top: -36.6rem;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .page-breaker__box {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 33.333333%;
    word-break: break-all;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .page-breaker__box:nth-child(1) {
    margin-top: 14rem;
  }
  .page-breaker__box:nth-child(2) {
    margin-top: 6rem;
  }
  .page-breaker__cta a {
    margin-bottom: 30rem;
  }
  .page-breaker--gradient .page-breaker__background-image {
    -webkit-clip-path: none;
            clip-path: none;
  }
}
@media (min-width: 992px) {
  .page-breaker {
    min-height: 78rem;
  }
  .page-breaker__background-image {
    min-height: 85rem;
    max-height: 99rem;
  }
  .page-breaker__boxes {
    margin-top: -35rem;
  }
  .page-breaker__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 413px;
    word-break: keep-all;
  }
  .page-breaker__box:nth-child(1) {
    margin-top: 21.3rem;
  }
  .page-breaker__box:nth-child(2) {
    margin-top: 9.9rem;
  }
  .page-breaker .rte p {
    letter-spacing: 1px;
  }
  .page-breaker .rte p:last-child {
    margin-bottom: 0;
  }
  .page-breaker__cta a {
    margin-bottom: 40.2rem;
  }
}