.c-fact-teaser {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    border-radius: 50%;
    transition: border-color .2s, box-shadow .2s;
}

a.c-fact-teaser {
    text-decoration: none;

    &:hover,
    &:focus {
        .c-fact-teaser__text {
            color: theme('colors.secondary.500');
        }
    }
}

.c-fact-teaser__title {
    font-size: theme('fontSize.6xl');
    hyphens: auto;
    color: theme('colors.secondary.500');
}

.c-fact-teaser__text {
    font-size: theme('fontSize.lg');
    hyphens: auto;
    color: theme('colors.gray.900');
    transition: color $transition-time ease-in-out;
}

.c-fact-teaser__icon {
    max-width: 100%;
    color: theme('colors.gray.400');

    svg {
        @apply mb-4;
        height: auto;
        max-height: 3rem;
        width: 2.5rem;

        @screen md {
            height: 3rem;
            max-height: none;
            width: auto;
            max-width: 2.5rem;
        }

        * {
            fill: currentColor;
        }
    }
}
