/*
	Abstracts are helpers, variables and functions
	for scss compliation.
*/
/*
	@TODO: Add to theme: new division fix for updated sass package.
*/
/**==================================================================================================================================
BREAKPOINT
@TODO: remove? What is use case?? either use simple global points or write custom line. why does first breakpoint have to be 0?
 ==================================================================================================================================*/
/**==================================================================================================================================
BREAKPOINT ENDS
==================================================================================================================================*/
span.edit-link {
  display: inline-block;
  background-color: yellow;
  font-weight: 500;
  position: fixed;
  left: 0;
  bottom: 3.125rem;
  transform: translateX(-45px);
  transition: all 0.2s;
}

span.edit-link a {
  display: block;
  padding: 0.9375rem;
}

span.edit-link:hover {
  transform: translateX(0);
}

.grid-container {
  max-width: 70.625rem;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-column-gap: 1.875rem;
}

@media screen and (max-width: 1280px) {
  .grid-container {
    padding: 0 0.9375rem;
  }
}
/*
	Variables for compliation
	NB! Colors should be added to base/config file as css root variable.
*/
/**
 * $size: font-size in number
 * $line-height: line-height in percentage
 * $weight: font-weight
 * $family: font-family
 * $color: font-color
 */
/**
 * Block section background colors.
 * Include the background options ACF fields group to use these.
 */
/*
 * makes ul/ol as a dropdown select (normaly in mobile)
 * Structure: div > title > list > li > a
*/
section.key-figures .heading-size-key-number {
  font-size: 6rem;
  font-weight: 600;
}

section.key-figures .key-figures__grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: 280px;
}

section.key-figures .key-figures__grid-item {
  grid-column: span 4;
  padding: 2rem 2.5rem;
  border-radius: var(--element-border-radius);
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

section.key-figures .key-figures__grid-item.has-background-grey .key_figure-decor, section.key-figures .key-figures__grid-item.has-background-teal-light .key_figure-decor, section.key-figures .key-figures__grid-item.has-background-teal-dark .key_figure-decor {
  color: var(--color__teal);
}

section.key-figures .key-figures__grid-item.has-background-pink-light .key_figure-decor {
  color: var(--color__pink);
}

section.key-figures .key-figures__grid-item p {
  line-height: 1;
  align-items: baseline;
  margin: 0;
}

section.key-figures .key-figures__grid-item p span:first-child {
  white-space: nowrap;
}

@media only screen and (max-width: 1500px) {
  section.key-figures .key-figures__grid-item p .heading-size-small {
    font-size: 1.8rem;
  }
}
section.key-figures .key-figures__grid-item .key_figures__figure-holder {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
}

section.key-figures .key-figures__grid-item .key_figures__figure-holder svg {
  width: 90%;
  height: auto;
  max-width: 400px;
  max-height: 180px;
}

section.key-figures .key-figures__grid-item.size-wide {
  grid-column: span 8;
}

section.key-figures .key-figures__grid-item.size-tall {
  grid-row: span 2;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

section.key-figures .key-figures__grid-item.size-tall .key_figures__figure-holder {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  margin-top: 21%;
}

@media (max-width: 1040px) {
  section.key-figures .key-figures__grid-item {
    grid-column: span 6;
  }
  section.key-figures .key-figures__grid-item.size-wide {
    grid-column: span 12;
  }
}
@media (max-width: 850px) {
  section.key-figures .key-figures__grid {
    grid-auto-rows: 210px;
  }
}
@media (max-width: 650px) {
  section.key-figures .key-figures__grid {
    grid-auto-rows: initial;
  }
  section.key-figures .key-figures__grid-item {
    grid-column: span 12;
    min-height: 220px;
  }
  section.key-figures .key-figures__grid-item p span {
    flex: 0 0 100%;
  }
  section.key-figures .key-figures__grid-item .key_figure-decor {
    display: none;
  }
  section.key-figures .key-figures__grid-item .big {
    font-size: 6.3rem;
  }
}