body {
        font-family: "Sono", sans-serif;
      }

      /* Hint: What can you do with a media query and flexbox? */
       @media (max-width: 1250px ) {
        .pricing-container {
          flex-direction: column;
          height: 100%;
        } 
      }

    .pricing-container {
        display: flex;
        justify-content: center; 
        align-items: center;
        height: 100vh;
        gap: 2rem;     
    }

    .pricing-plan {
      flex: 1;
      max-width: 400px;
      padding: 20px;
      background-color: rgb(204, 201, 201);
      border-radius: 5px;
      text-align: center;     
    }

    .plan-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .plan-price {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 10px;        
    }

    .plan-features {
        list-style: none;
        padding: 0;
        margin:0;      
    }

    .plan-features {
      margin-bottom: 20px;
    }

    .plan-button {
        padding: 10px;
        background-color: red;
        color: white;
        border-radius: 10px;
        border: none;
    }