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

@media(max-width:1024px){

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

}

@media(max-width:768px){

  .creator-layout .grid-4,
  .creator-layout .grid-2,
  .creator-layout .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;
  }

}