/* --- SCSS Variables --- */
/* These are the default WordPress Breakpoints */
/* Custom Breakpoints */
.htgf-block-kpis {
  width: 100%;
  /* The header */
  /* The KPI numbers */
}
@media (max-width: 600px) {
  .htgf-block-kpis {
    margin-top: var(--wp--preset--spacing--80);
  }
}
.htgf-block-kpis__header {
  margin-top: 6rem;
  margin-bottom: 6rem;
}
@media (max-width: 781px) {
  .htgf-block-kpis__header {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
}
.htgf-block-kpis__header > .wp-block-group {
  position: relative;
}
.htgf-block-kpis__header-title {
  z-index: 3;
}
.htgf-block-kpis__header-icon {
  z-index: 1;
  position: absolute;
  width: 100%;
  opacity: 0.3;
  max-width: 15rem;
  aspect-ratio: 1;
  top: -3rem;
  background-image: url(../../assets/images/HTGF-Mastergradient.webp);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
@supports not (-webkit-touch-callout: none) {
  .htgf-block-kpis__header-icon { /* CSS for other than iOS devices */
    background-attachment: fixed;
  }
}
@supports (-webkit-touch-callout: none) {
  .htgf-block-kpis__header-icon { /* CSS specific to iOS devices */
    background-size: cover !important;
  }
}
.htgf-block-kpis .htgf-background-animation--clone {
  z-index: 2;
  mix-blend-mode: color;
}
.htgf-block-kpis__kpi-blocks {
  column-gap: 0;
  row-gap: 4rem !important;
  z-index: 3;
  position: relative;
}
.htgf-block-kpis__kpi-block {
  flex: 1;
  background-repeat: no-repeat;
  background-size: auto !important;
  background-position: 50% 40%;
  min-width: 250px;
  margin-bottom: 2rem;
}
.htgf-block-kpis__kpi-block > h1,
.htgf-block-kpis__kpi-block > h2,
.htgf-block-kpis__kpi-block > h3,
.htgf-block-kpis__kpi-block > p,
.htgf-block-kpis__kpi-block > div {
  text-align: center;
}
.htgf-block-kpis__preunit {
  font-size: var(--wp--preset--font-size--x-large);
  transform: translateY(-0.8rem) translateX(0.5rem);
  display: inline-block;
  margin-left: -1rem;
}
.htgf-block-kpis__unit {
  margin-left: 0.5rem;
}
.htgf-block-kpis__unit-symbol {
  font-size: var(--wp--preset--font-size--x-large);
}
.htgf-block-kpis__intro {
  font-size: var(--htgf--preset--font-size--caption-large);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}
.htgf-block-kpis__heading {
  font-size: var(--wp--preset--font-size--xx-large);
  white-space: nowrap;
  z-index: 0;
}
.htgf-block-kpis__heading img {
  position: absolute;
  transform: translateX(-100%);
  max-width: min(60vw, 200rem);
  z-index: -1;
}
.htgf-block-kpis__value.blurred1 {
  filter: url(#blur1);
}
.htgf-block-kpis__value.blurred2 {
  filter: url(#blur2);
}
.htgf-block-kpis__value.blurred3 {
  filter: url(#blur3);
}
.htgf-block-kpis__value.blurred4 {
  filter: url(#blur4);
}
.htgf-block-kpis__value.blurred5 {
  filter: url(#blur5);
}

/* This is needed to prevent the copie of the animation to cover and color the entire site.
 * We don't need this as long as we just use a static background for the icon.
.entry-content > .wp-block-group > .wp-block-group {
  z-index: 3;
  position: relative;

  &:has( > .htgf-block-kpis) {
    position: static;
  }
}
*/