@layer component.base {
  .fact__content {
    display: flex;
    flex-direction: column;
  }

  .fact__description {
    filter: var(--tw-blur) var(--tw-brightness) contrast(0.75)
      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    text-align: center;
  }

  .fact__number {
    font: var(--colossal);
  }

  .fact__title {
    font-weight: 500;
    margin-top: 1rem;
  }

  .fact__action {
    margin-top: 1.5rem;
  }

  .fact__image {
    display: block;
    width: 4rem;
    margin-inline: auto;
  }
}