React class module doesn't build class correctly-CodePudding

I use class modules throughout my project, but for some reason in one of my components it isn't built correctly:

import Body from './Body';
import IllustrationJobs from '../../assets/images/illu_jobs.svg';

import styles from "./Careers.modules.css";

const Careers = () => {
    return (
        <Body>
            <section className={styles.rowOneContainer}>
                <div className={`${styles.careersText} animate__animated animate__fadeInLeft`}>Right now we don't have any open positions. Make sure to check by
                soon again or contact us directly.</div>
                <div className={`${styles.careersImage} animate__animated animate__fadeInRight`}><img src={IllustrationJobs} alt="illustration_jobs"/></div>
            </section>
        </Body>
    )
}
export default Careers;

CSS

.rowOneContainer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.careersText {
    width: 50%;
    margin: auto;
    text-align: center;
    font-size: 1.5rem;
    color: var(--salaryx-purple-dark);
}

.careersImage {
    width: 50%;
}

returns

while in other components the very same syntax returns the correct class. Why's that?

CodePudding user response：

Careers.modules.css is invalid format for the file Use Careers.module.css instead

CodePudding user response：

What is the "animate__animated animate__fadeInLeft"?.

Is that a style module or regular CSS?
Are those two class names?
Where is the code for this?