@media (max-width:44rem ) {
    /* 700px / 16px = 44rem */
    /* 44rem * 16ox = 704px */

    html{
        font-size: 50%;  /* 1rem = 8px*/
        /* 8px / 16px = 50%*/
    }

    body{
        height: auto;
    }

    .main-container {
        gap: 1rem;
    }

    .heading-paragraph-container {
        text-align: center;
        margin-top: 2rem;
    }

    .cards-container{
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .card-paragraph {
        margin-bottom: 2rem;
    }
}