flex-direction: column not responding to media query for screen sizes

Simple CTA cards. Flex-direction is set to column for media query <= 768, but browser is ignoring the breakpoint.

I expected the items in the container to display in a column format when the screen size was <= 768px but they remain in a row.

CSS:

      .pricing-container {        display: flex;        justify-content: center;        align-items: center;        height: 100vh;        gap: 2rem;      }      .pricing-plan {        flex: 1;        max-width: 400px;        background-color: #f2f2f2;        border-radius: 5px;        padding: 20px;        text-align: center;      }      .plan-button {        background-color: #ff6600;        color: white;        border: none;        border-radius: 5px;        padding: 10px;      }      @media (max-width: 768px) {        .pricing-container {          flex-direction: column;          height: 100%;        }        .pricing-plan {          width: 400px;        }      }

HTML:

<div class="pricing-container"><div class="pricing-plan"><div class="plan-title">Lorem ipsum odor amet, consectetuer</div><div class="plan-price">$11.99/month</div><button class="plan-button">Sign Up</button></div><div class="pricing-plan"><div class="plan-title">Lorem ipsum odor amet, consectetuer</div><div class="plan-price">$19.99/month</div><button class="plan-button">Sign Up</button></div><div class="pricing-plan"><div class="plan-title">Lorem ipsum odor amet, consectetuer</div><div class="plan-price">$49.99/month</div><button class="plan-button">Sign Up</button></div></div>