.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;
}

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

.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 {
        margin-bottom: 1rem;
        height: auto;
        max-height: 3rem;
        width: 2.5rem;

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

        * {
            fill: currentColor;
        }
    }
}

// Accent Color Modifiers

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

.c-fact-teaser--secondary {
    .c-fact-teaser__title {
        color: theme('colors.secondary.500');
    }
}

// Primary
a.c-fact-teaser--primary {
    &:hover,
    &:focus {
        .c-fact-teaser__text {
            color: theme('colors.primary.500');
        }
    }
}

.c-fact-teaser--primary {
    .c-fact-teaser__title {
        color: theme('colors.primary.500');
    }
}

// Accent
a.c-fact-teaser--accent {
    &:hover,
    &:focus {
        .c-fact-teaser__text {
            color: theme('colors.accent.500');
        }
    }
}

.c-fact-teaser--accent {
    .c-fact-teaser__title {
        color: theme('colors.accent.500');
    }
}

// CTA
a.c-fact-teaser--cta {
    &:hover,
    &:focus {
        .c-fact-teaser__text {
            color: theme('colors.cta.500');
        }
    }
}

.c-fact-teaser--cta {
    .c-fact-teaser__title {
        color: theme('colors.cta.500');
    }
}

// Ambient
a.c-fact-teaser--ambient {
    &:hover,
    &:focus {
        .c-fact-teaser__text {
            color: theme('colors.ambient.500');
        }
    }
}

.c-fact-teaser--ambient {
    .c-fact-teaser__title {
        color: theme('colors.ambient.500');
    }
}
