/**
* 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.
**/
.gradient-banner {
  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%);
}
.gradient-banner .breadcrumb {
    margin-top: var(--sm-2);
}
.gradient-banner__boxes {
  margin-top: 2.4rem;
  gap: 0;
}
.gradient-banner__box {
  min-height: 20rem;
  width: 100%;
}
.gradient-banner__box:nth-child(1) {
  background-color: var(--light-quartz);
  color: var(--copper);
}
.gradient-banner__box:nth-child(2) {
  background-color: var(--copper);
  color: var(--white);
}
.gradient-banner__box:nth-child(3) {
  background-color: var(--medium-quartz);
  color: var(--onyx);
}
.gradient-banner--with-image {
  background: none;
  height: 100%;
  max-height: 100%;
}
.gradient-banner--with-image .gradient-banner__background-image:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 4;
    width: 100%;
    height: 100%;
    background: linear-gradient(359.15deg, rgba(0, 0, 0, 0.5) 8.15%, rgba(0, 0, 0, 0) 80.78%);
}
.gradient-banner--with-image .gradient-banner__content {
  height: 32.6rem;
  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-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gradient-banner--with-image .gradient-banner__background-image {
  height: 100%;
  width: 100%;
  max-height: 32.6rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 81.3%, 0% 99%);
          clip-path: polygon(0 0, 100% 0, 100% 81.3%, 0% 99%);
  top: 0;
  z-index: -10;
}
.gradient-banner--with-image .gradient-banner__content h1 {
  color: var(--white);
}
.gradient-banner--with-image .gradient-banner__content p {
  display: none;
}
.gradient-banner--with-image .gradient-banner__box {
  width: 50%;
  height: 100%;
}
.gradient-banner--with-image .gradient-banner__box-wrap {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.gradient-banner--with-image .gradient-banner__box-wrap:nth-child(1) .gradient-banner__box:nth-child(1) {
  background-color: var(--alloy);
  color: var(--grey);
}
.gradient-banner--with-image .gradient-banner__box-wrap:nth-child(1) .gradient-banner__box:nth-child(2) {
  background-color: var(--dark-stone);
  color: var(--grey);
}

.gradient-banner--with-image .gradient-banner__box-wrap:nth-child(2) .gradient-banner__box:nth-child(1) {
  background-color: var(--quartz);
  color: var(--alloy);
}
.gradient-banner--with-image .gradient-banner__box-wrap:nth-child(2) .gradient-banner__box:nth-child(2) {
  background-color: var(--light-quartz);
  color: var(--alloy);
}

.gradient-banner--with-image .gradient-banner__box-wrap:nth-child(3) .gradient-banner__box:nth-child(1) {
  background-color: var(--heritage-red);
  color: var(--white);
}
.gradient-banner--with-image .gradient-banner__box-wrap:nth-child(3) .gradient-banner__box:nth-child(2) {
  background-color: var(--onyx);
  color: var(--grey);
}


.gradient-banner--with-image .gradient-banner__boxes {
  margin-top: -9rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.pg-gref-banner-heading .text-heritage-red,.pg-roy-banner-heading .text-heritage-red, .pg-gmaf-banner-heading .text-heritage-red, .pg-gif-banner-heading .text-heritage-red, .pg-ngif-banner-heading .text-heritage-red, .pg-gvf-banner-heading .text-heritage-red
{font-size: var(--h2-fs);line-height: var(--h2-lh)}

@media (min-width: 768px) {
  .gradient-banner__boxes {
    margin-top: -1.6rem;
  }
  .gradient-banner--without-image .gradient-banner__box {
    min-height: 33.3rem;
    width: 33.3333333333%;
    height: 41.3rem;
  }
  .gradient-banner--without-image .gradient-banner__box:nth-child(1) {
    margin-top: 17.5rem;
  }
  .gradient-banner--without-image .gradient-banner__box:nth-child(2) {
    margin-top: 7.5rem;
  }
  .gradient-banner--without-image .gradient-banner__box:nth-child(3) {
    margin-top: -2.6rem;
  }
  .gradient-banner--with-image {
    max-height:100%;
    height:100%;
  }
  .gradient-banner--with-image .gradient-banner__content {
    height: 67rem;
  }
  .gradient-banner--with-image .gradient-banner__background-image {
    max-height: 67rem;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 81.3%, 0% 99%);
            clip-path: polygon(0 0, 100% 0, 100% 81.3%, 0% 99%);
  }
  .gradient-banner--with-image .gradient-banner__boxes {
    margin-top: -21rem;
  }
}
@media (min-width: 1200px) {
  .gradient-banner__content p {
    letter-spacing: 0.45px;
  }
  .gradient-banner__box {
    min-height: 41.3rem;
    max-width: 41.3rem;
  }
  .gradient-banner--with-image {
    height: 100%;
    max-height:100%;
  }
  .gradient-banner--with-image .gradient-banner__content {
    height: 89rem;
        margin-top: 0;
  }
  .gradient-banner--with-image .gradient-banner__background-image {
    max-height: 89rem;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 56.3%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 56.3%, 0% 100%);
  }
  .gradient-banner--with-image .gradient-banner__box-wrap {
    width: 33.33%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .gradient-banner--with-image .gradient-banner__box-wrap:nth-child(2) {
    margin-top: -9.5rem;
  }
  .gradient-banner--with-image .gradient-banner__box-wrap:nth-child(3) {
    margin-top: -19.5rem;
  }
  .gradient-banner--with-image .gradient-banner__box {
    width: 100%;
    height: 100%;
  }
  .gradient-banner--with-image .gradient-banner__boxes {
    margin-top: -16.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
	
.gradient-banner.reduced--height--banner.gradient-banner__boxes{margin-top: -38.5rem;}
.gradient-banner--with-image .gradient-banner__background-image{max-height: 63rem;}
.reduced--height--banner.gradient-banner--with-image .gradient-banner__content {height: 89rem; margin-top: -190px;}
.reduced--height--banner .gradient-banner__box {min-height: 35.3rem; max-width: 41.3rem;}
}