/* ==========================================================
   RESPONSIVE MOBILE LAYOUTS
========================================================== */

@media (max-width:1024px){

    .grid-4{
        grid-template-columns:1fr 1fr;
    }

}

@media (max-width:768px){

    .grid-4,
    .grid-2,
    .output-grid{
        grid-template-columns:1fr;
    }

    .hero-title{
        flex-direction:column;
        text-align:center;
    }

    .hero h1{
        font-size:34px;
    }

    .container{
        padding:20px 14px;
    }

    .access-card{
        padding:50px 24px;
    }

    .top-buttons,
    .bottom-buttons{
        flex-direction:column;
    }

    .button{
        width:100%;
    }

}

/* =========================
   EXPLORER MOBILE BUTTONS
========================= */

@media(max-width:768px){

  .explorer-layout .top-buttons,
  .explorer-layout .bottom-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:12px;

    width:100%;
  }

  .explorer-layout .top-buttons .button,
  .explorer-layout .bottom-buttons .button{
    width:100%;
    max-width:280px;
  }

}