@media (max-width: 1400px) {
  .nav-container__links {
    width: 30%;
  }
}

@media(max-width:1200px){
  .starbucks_footer{
  height: 18rem;

  }
  .footer_link{
    height:100%;
  }
  .footer_link ul{
    height:100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
  }
  .footer_link li:nth-child(even){
  display:none;
}
}

@media (max-width: 1100px) {
  .nav-container__links {
    width: 40%;
  }
  .terms_section{
    height:70rem;
  }
}

@media (max-width: 950px) {
  .nav-container__links {
    width: 45%;
  }
}

/* Switch: grid -> accordion */
    @media (max-width: 900px) {
      .footer-grid { display: none; }
      .footer-accordion { display: block; }
      .footer-wrap { padding: 18px; }
    }

@media(max-width:850px){
  .grid-2{
    display:grid;
    grid-template-columns: 1fr;
  }
  .grid-2-reverse{
        display:grid;
    grid-template-columns: 1fr;
  }

   .grid-2-reverse div:nth-child(2){
   order:1;
 }

 .grid-2-reverse div:nth-child(1){
   order:2;
 }

}

@media (max-width:760px) {
   .nav-container__links {
    width: 60%;
  }
   .terms_section{
    height:90rem;
  }
}



@media (max-width: 600px) {
  .nav_links {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    background: #fff;
    justify-content: center;
    align-items: center;

    gap: 1.5rem;
    z-index: 4;

    /* animation setup */
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;

    transition: opacity 0.7s ease, transform 1.3s ease;
  }
  .nav_links li {
    padding: 3rem 0;
    font-size: 2rem;
    text-align: justify;
  }

  .nav_links.active {
     opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav__toggle {
    display: block;
    z-index: 5;
    position: absolute;
    right: 2rem;
    top: 2rem;
  }

  .terms_section{
    height:75rem;
  }
  .terms_section ul{
    width:100%;
    height:100%;
  }
  .terms_section li{
    font-size:1.3rem;
  }

}

@media(max-width:500px){
  .info_grids{
    font-size:1.3rem;
  }
}

@media(max-width:350px){
  .hero_section-header p{
    font-size:1.6rem;
  }
  .action_button a{
    font-size:1.1rem;
  }
  .action_button-cream a{
    font-size:1.1rem;

  }
}