.cmpt_banner_box {
  border-radius: 0.5em;
  overflow: hidden;
  box-shadow: inset 0 -2px 0 hsla(0, 0%, 0%, 0.125);
}
.cmpt_banner_box--height-100 {
  height: 100%;
}
.cmpt_banner_box--height-100 > * {
  height: 100%;
}
.cmpt_banner_box--white_to_blue {
  background: linear-gradient(180deg, hsla(205, 74%, 37%, 0.15) 0, hsl(0, 0%, 100%) 100%);
  background-size: auto;
  background-repeat: no-repeat;
  box-shadow: none !important;
}
.cmpt_banner_box--blue_light {
  background: linear-gradient(134deg, hsl(201, 81%, 96%) 0, hsl(206, 39%, 64%) 100%);
  background-size: auto;
  background-repeat: no-repeat;
}
.cmpt_banner_box--blue_light_img {
  background-color: hsl(199, 76%, 90%);
  background-image: url(/templates/images/bg_blue_light.webp);
  background-position: right top;
  background-repeat: no-repeat;
}
.cmpt_banner_box--blue {
  background-color: var(--pg-color-main);
}
.cmpt_banner_box--dark {
  background: linear-gradient(180deg, rgb(0, 54, 94) 0%, rgb(0, 28, 49) 100%);
  box-shadow: 0 0 0 1px rgba(0, 81, 140, 0.51), 0 -2px 1px 0 inset rgba(0, 0, 0, 0.1);
  border: 1px solid var(--pg-color-main);
}
.cmpt_banner_box--blue_img {
  background-image: linear-gradient(to right, color-mix(in hsl, var(--pg-color-main-smooth), transparent 0%) 0%, color-mix(in hsl, var(--pg-color-main-smooth), transparent 50%) 60%, color-mix(in hsl, var(--pg-color-main-smooth), transparent 100%) 80%), url("/templates/images/bg_blue.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.cmpt_banner_box--gray_light {
  background-color: hsl(0, 7%, 97%);
}
.cmpt_banner_box--dark_extra {
  background: var(--pg-color-main-dark);
  background-size: auto;
  background-repeat: no-repeat;
}
.cmpt_banner_box--important {
  background-color: color-mix(in hsl, var(--pg-color-danger), transparent 85%);
}