/****************/
/* BELOW 1120px*/
/***************/

@media (max-width: 70em) {
  .section-div{
    max-width: 85vw;
  }

  .carrossel img{
    width: 100vw;
  }

  .right-arrow{
    right: 0%;
  }

  .mestre-article{
    max-width: 40vw;
  }

  .card{
    width: 22vw;
  }
}

/****************/
/* BELOW 480px*/
/***************/

@media (max-width: 30em) {
  html {
    font-size: 50%;
  }

  .section-div{
    max-width: 85vw;
  }

  .logo{
    width: 10vw;
  }

  /* MOBILE NAVIGATION */
  .btn-menu {
    display: block;
    z-index: 9999;
  }

  .nav {
    background-color: rgba(255, 255, 255, 0.954);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }
  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .nav-list {
    flex-direction: column;
    gap: 2rem;
  }

  .nav-link:link,
  .nav-link:visited {
    font-size: 3rem;
    color: #555;
  }

  .nav-icon, .sticky .nav-icon{
    font-size: 3.4rem;
    color: #555;
  }

  .mestre-espiga-div{
    grid-template-columns: 1fr;
  }

  .mestre-pic{
    width: 60vw;
    margin-bottom: 2rem;
  }

  .mestre-article{
    max-width: 90vw;
  }

  .turmas-div{
    grid-template-columns: 1fr;
  }

  .card{
    width: 70vw;
    margin-bottom: 3rem;
  }

  .card img{
    width: 50vw;
  }

  .turmas-div h4{
    font-size: 2.4rem;
  }

  .turmas-div p{
    font-size: 2rem;
  }

  .local-div{
    grid-template-columns: 1fr;
  }

  .mapa{
    width: 85vw;
    height: 50vw;
    grid-row: 2 / 3;

    margin-top: 3rem;
  }

  .endereço h3{
    margin-bottom: 1.6rem;
  }

  .footer-div{
    grid-template-columns: 1fr;
    align-items: center;
    padding: 6rem 0 5rem 0;  
  }

  .contato, .social{
    align-items: center;
  }
  
  .footer-div a{
    padding-bottom: 1rem;
  }
}