/**
 * Global settings.
 */
/**
 * Bacon overrides.
 */
/**
 * Mixins (imported after variables so they can use them)
 */
@keyframes skeleton-loading {
  0% {
    transform: translateX(-100%);
  }
  60% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.c-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-xs);
}
@media (min-width: 1024px) {
  .c-counter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "empty image" "text numbers";
    gap: var(--s-md);
  }
}
.c-counter picture {
  grid-area: image;
}
.c-counter__text {
  grid-area: text;
  font-size: var(--text-2xl);
  color: var(--c-brand-secondary);
  font-weight: 700;
  display: flex;
  align-items: center;
  order: 2;
}
.c-counter__numbers {
  grid-area: numbers;
  font-size: var(--text-5xl);
  color: var(--c-grayscale);
  font-weight: 700;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2xs);
}
@media (min-width: 1024px) {
  .c-counter picture {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .c-counter__text {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .c-counter__numbers {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
}
.c-counter__number {
  border: 1px solid var(--c-grayscale-lighter);
  border-radius: 4px;
  padding-inline: var(--s-2xs);
  width: 1ch;
  box-sizing: content-box;
  text-align: center;
  background-color: var(--c-grayscale-off-white);
}
.c-counter--alternative .c-counter__number {
  color: var(--c-grayscale);
  border: 1px solid var(--c-brand-secondary);
  background-color: var(--c-brand-secondary);
  color: var(--c-grayscale-off-white);
}
.c-counter--alternative .c-counter__separator {
  color: var(--c-brand-secondary);
}