Astro component missing styles when deployed to Vercel

Question

I'm building a website using Astro and deploying it to Vercel. One of my components, Footer.astro, is missing all of its styles only in production. It works fine locally. Also all other components have styles imported correctly.

Footer.astro:

import "./Footer.css";

const text = {
  home: "",
  about: "",
  services: "",
};

<footer id="cs-footer">
  <div class="cs-container">
    <ul class="cs-ul">
      <li class="cs-li">
        <a href="/" class="cs-link">{text.home}</a>
      </li>
      <li class="cs-li">
        <a href="/about" class="cs-link">{text.about}</a>
      </li>
      <li class="cs-li">
        <a href="/services" class="cs-link">{text.services}</a>
      </li>
    </ul>
  </div>
</footer>

Footer.css

#cs-footer {
  background-color: var(--lighterPrimaryBackground);
  padding: clamp(2.5rem, 7.9vw, 6.25rem) 1rem;
  padding-bottom: clamp(2.5rem, 7.9vw, 3.125rem);
}

#cs-footer .cs-container {
  max-width: 80rem;
  margin: auto;
}

/* ... more styles ... */

@media only screen and (min-width: 37.5rem) {
  #cs-footer .cs-ul {
    display: flex;
    justify-content: center;
  }
}

DevTools Comparison:

Local (working)

Production (broken)