nextjs missing css

[upper axle]

Hello, I am working on a nextjs 14 project and I have a side by side view and when I tested the code locally using npm run dev, its working fine, the text is showing right and the media at left.
However, when I deployed the code to vercel production, there is something wrong with the way it is being rendered :-
The text seems to be stuck at start I don't know why, on inspecting I found out that its not able to have the css loaded for that particular text container.

[teal bloom]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[candid quartz]

where is the css? how are you importing the css in your project? have you check for some error in your browser console or network?

[upper axle]

I have a SideBySide.module.css and SideBySide.tsx files and imported the css in there.

&.isTextRight {
    .contentWrapper,
    .touts {
      @media (min-width: 768px) {
        --text-content-start: calc(var(--grid-number-of-columns) / 2 + 4);
      }
    }

    .mediaContainer {
      @media (min-width: 768px) {
        order: -1;

        --media-start: start;
        --media-width: calc(var(--grid-number-of-columns) / 2 + 1);

      }
    }

    .contentWrapper,
    .touts {
      @media (min-width: 1050px) {
        --text-content-start: calc(var(--grid-number-of-columns) / 2 + 3);
      }
    }

    .mediaContainer {
      @media (min-width: 1050px) {
        order: -1;

        --media-start: start;
        --media-width: calc(var(--grid-number-of-columns) / 2);

      }
    }
  }



&.isTextLeft {

    /* Module Left */

    @media (min-width: 768px) {
      .contentWrapper,
      .touts {
        --text-content-start: col 1;
      }
    }

    @media (min-width: 768px) {
      .mediaContainer {
        --media-start: calc(var(--grid-number-of-columns) / 2 + 1);
        --media-width: calc(var(--grid-number-of-columns) / 2 + 1);
      }
    }


    @media (min-width: 1050px) {
      .contentWrapper,
      .touts {
        --text-content-start: col 2;
      }
    }

    @media (min-width: 1050px) {
      .mediaContainer {
        --media-start: calc(var(--grid-number-of-columns) / 2 + 2);
        --media-width: calc(var(--grid-number-of-columns) / 2);
      }
    }
  }
}
~```

and this is the css that aligns the text right or left and the media accordingly

When running the app locally, everything seems to be working fine, but when I build the nextss for production, there seems to be something wrong

I checked the minified code from browser and there seems to be mission the contentWrapper code