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>