/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:768px){

    .card{

        width:94vw;

        padding:38px 28px;

    }

    h1{

        font-size:1.7rem;

    }

    h2{

        font-size:1.05rem;

    }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:480px){

    .container{

        padding:16px;

    }

    .card{

        border-radius:24px;

        padding:28px 20px;

    }

    .logo-frame{

        width:118px;

        height:118px;

    }

    .logo{

        width:92px;

        height:92px;

    }

    h1{

        font-size:1.45rem;

    }

    h2{

        font-size:1rem;

    }

    #hari{

        font-size:1rem;

    }

    #tanggal{

        font-size:1.15rem;

    }

    .button-group button{

        height:54px;

        font-size:.95rem;

    }

}