/*
* Global button styling
*/
/*
* MEDIA QUERIES
* Breakpoints for responsive sites
*/
/*
* Breakpoint debugging
*/
/*
* SASS Parent append
* Useful if you want to add an append to the parent without writing it out again
* Usage: @include parent-append(":hover")
* Source: https://codepen.io/imkremen/pen/RMVBvq
*/
/*
* Skew
* Useful mixing to create skewed edges
* Usage: @include angle-edge(bottomright, 3deg, topleft, 3deg, #fff);
* Source: http://www.hongkiat.com/blog/skewed-edges-css/
*/
.block-kpi-key {
  padding: var(--wp--preset--spacing--small);
  background: var(--wp--preset--color--light-grey);
}
.block-kpi-key h3 {
  font-size: var(--wp--preset--font-size--normal);
  margin-bottom: var(--wp--preset--spacing--small);
}
.block-kpi-key .risks-colours {
  border-bottom: 1px solid var(--wp--preset--color--black);
  padding-bottom: var(--wp--preset--spacing--small);
  margin-bottom: var(--wp--preset--spacing--small);
}
.block-kpi-key .kpi-key__container:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--normal);
}
.block-kpi-key .kpi-key__link {
  margin: 0;
}
.block-kpi-key .kpi-key__links {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.block-kpi-key .kpi-key__links:not(:last-child) {
  margin-bottom: var(--wp--preset--spacing--normal);
}
.block-kpi-key .kpi-key__links__strategies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
@media (max-width: 1024px) {
  .block-kpi-key .kpi-key__links__strategies {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 782px) {
  .block-kpi-key .kpi-key__links__strategies {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 620px) {
  .block-kpi-key .kpi-key__links__strategies {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .block-kpi-key .kpi-key__links__strategies {
    grid-template-columns: 1fr;
  }
}
.block-kpi-key .kpi-key__links__risks {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}
.block-kpi-key .kpi-key__risk-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
@media (max-width: 1024px) {
  .block-kpi-key .kpi-key__risk-section {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 782px) {
  .block-kpi-key .kpi-key__risk-section {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 620px) {
  .block-kpi-key .kpi-key__risk-section {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .block-kpi-key .kpi-key__risk-section {
    grid-template-columns: 1fr;
  }
}
.block-kpi-key .kpi-key__link {
  display: flex;
  gap: 0.5em;
  cursor: unset;
}
.block-kpi-key .kpi-key__link__icon {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  cursor: unset;
}
.block-kpi-key .kpi-key__link__title {
  all: unset;
  font-size: 12px;
  margin-top: 6px;
  color: var(--wp--preset--color--black);
  font-weight: 400;
  line-height: 1.2;
}