/* ========================================
RESPONSIVIDADE
======================================== */

/* ========================================
TABLETS
======================================== */

@media(max-width:980px){

  /* HEADER */

  .header{

    padding:0 24px;

  }

  /* MENU */

  .menu{

    gap:18px;

  }

  .menu a{

    font-size:14px;

  }

  /* HERO */

  .hero-content{

    width:100%;

  }

  .hero-content h1{

    font-size:58px;

  }

  .hero-content p{

    width:100%;

    max-width:500px;

  }

  /* GRID */

  .featured-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  .categories-grid{

    grid-template-columns:
    repeat(3,1fr);

  }

  /* HOME ROW */

  .home-row{

    grid-template-columns:
    1fr;

  }

  /* PERFIL */

  .profile-about{

    grid-template-columns:
    1fr;

  }

}

/* ========================================
CELULARES
======================================== */

@media(max-width:768px){

  /* SITE */

  .site{

    width:100%;

    margin-top:74px;

    border-radius:0;

  }

  /* HEADER */

  .header{

    width:100%;

    padding:0 18px;

  }

  /* MENU */

  .menu{

    display:none;

  }

  /* HERO */

  .hero{

    height:480px;

    margin:0;

    border-radius:0;

  }

  .hero-content{

    width:100%;

    left:0;

    padding:0 24px;

  }

  .hero-content h1{

    font-size:48px;

    line-height:.95;

  }

  .hero-content p{

    width:100%;

    font-size:14px;

  }

  .hero-search{

    width:100%;

  }

  /* GRID */

  .featured-grid{

    grid-template-columns:
    1fr;

  }

  .categories-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  /* PERFIL HERO */

  .profile-hero{

    flex-direction:column;

    align-items:flex-start;

  }

  .profile-image{

    width:100%;

    height:auto;

  }

  .profile-content h1{

    font-size:48px;

  }

  .profile-quote{

    font-size:20px;

  }

  /* STATS */

  .profile-stats{

    grid-template-columns:
    repeat(2,1fr);

  }

  /* HOMENAGENS */

  .tributes-grid{

    grid-template-columns:
    1fr;

  }

  .tributes-header{

    flex-direction:column;

    align-items:flex-start;

  }

  .tributes-left{

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

  }

  /* FOOTER */

  .footer{

    flex-direction:column;

    gap:28px;

    text-align:center;

  }

  .footer-links{

    flex-wrap:wrap;

    justify-content:center;

  }

}