.factoids {
  padding-left: 8px;
  padding-right: 8px;
}

@media (min-width: 768px) {
  .factoids {
    padding-left: .5vw;
    padding-right: .5vw;
  }
}

.factoids--align-centered .factoids__item-figure, .factoids--align-centered .factoids__item-description {
  text-align: center;
}

.factoids--align-right .factoids__item-figure, .factoids--align-right .factoids__item-description {
  text-align: right;
}

.factoids .factoids__heading {
  font-size: 28px;
  font-family: Theinhardt, system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding-top: 24px;
  padding-bottom: 5px;
  margin-top: 12px;
}

@media (min-width: 300px)and (max-width: 1499px) {
  .factoids .factoids__heading {
    font-size: calc(28px + (36 - 28) * (100vw - 300px) / (1500 - 300));
  }
}

@media (min-width: 1500px) {
  .factoids .factoids__heading {
    font-size: 36px;
  }
}

.factoids .factoids__heading a {
  box-shadow: inset 0 -4px var(--c-bg), inset 0 -5px var(--c-border);
  color: var(--c-text-link);
  cursor: pointer;
  transition: box-shadow .2s cubic-bezier(0.645, 0.045, 0.355, 1), color .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.factoids .factoids__heading a:hover, .factoids .factoids__heading a:focus {
  box-shadow: inset 0 -4px var(--c-bg), inset 0 -5px var(--c-text-strong);
  color: var(--c-text-strong);
}

@media (min-width: 600px) {
  .factoids .factoids__heading a {
    box-shadow: inset 0 -6px var(--c-bg), inset 0 -7px var(--c-border);
    color: var(--c-text-link);
    cursor: pointer;
    transition: box-shadow .2s cubic-bezier(0.645, 0.045, 0.355, 1), color .2s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .factoids .factoids__heading a:hover, .factoids .factoids__heading a:focus {
    box-shadow: inset 0 -6px var(--c-bg), inset 0 -7px var(--c-text-strong);
    color: var(--c-text-strong);
  }
}

@media (min-width: 768px) {
  .factoids .factoids__heading {
    padding-top: 36px;
    padding-bottom: 12px;
    margin-top: 0;
  }
}

.factoids .factoids__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(2, 1fr);
}

.factoids .factoids__list li {
  margin: 0;
  padding: 0;
}

.factoids .factoids__list li::before {
  display: none;
}

@media (min-width: 600px) {
  .factoids .factoids__list {
    grid-gap: 2vw;
    grid-template-columns: repeat(3, 1fr);
  }
}

.factoids li.factoids__item {
  margin: 12px 0;
}

@media (min-width: 600px) {
  .factoids li.factoids__item {
    margin: 18px 0;
  }
}

.factoids .factoids__item-figure {
  font-size: 36px;
  font-family: Theinhardt, system-ui, sans-serif;
  font-size: 36px;
  line-height: 1;
  font-weight: 500;
  display: block;
  letter-spacing: -0.005em;
  margin-bottom: 5px;
}

@media (min-width: 300px)and (max-width: 1499px) {
  .factoids .factoids__item-figure {
    font-size: calc(36px + (72 - 36) * (100vw - 300px) / (1500 - 300));
  }
  .factoids.factoids--block-small .factoids__item-figure {
    font-size: calc(20px + (72 - 36) * (100vw - 300px) / (1500 - 300));
  }
}

@media (min-width: 1500px) {
  .factoids .factoids__item-figure {
    font-size: 72px;
  }
  .factoids.factoids--block-small .factoids__item-figure {
    font-size: 50px;
  }
}

.factoids .factoids__item-figure em {
  color: var(--c-text-link);
  font-size: 60%;
  margin: 0 2px;
  vertical-align: middle;
}

.factoids .factoids__item-description {
  font-family: Theinhardt, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 400;
  display: block;
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .factoids .factoids__item-description {
    font-size: 17px;
    line-height: 1.4;
  }
}

.factoids.factoids--font-serif .factoids__list .factoids__item-figure {
  font-family: Academica, serif;
}

.factoids.factoids--block .factoids__list {
  display: block;
  text-align: center;
  width: 100%
}

.factoids.factoids--block .factoids__list li.factoids__item {
  display: inline-block;
  margin: 18px 1%;
  vertical-align: top;
  width: 92%
}

@media (min-width: 360px) {
  .factoids.factoids--block .factoids__list li.factoids__item {
    width: 46%
  }
}

@media (min-width: 600px) {
  .factoids.factoids--block .factoids__list li.factoids__item {
    width: 30%
  }
  .factoids.factoids--block.factoids--block-small .factoids__list li.factoids__item {
    width: 20%
  }
}

@media (min-width: 1200px) {
  .factoids--four-cols .factoids.factoids--block .factoids__list li.factoids__item {
    width: 22%
  }
  .factoids--four-cols .factoids.factoids--block .factoids__list li.factoids__item {
    width: 22%
  }
}