/* 1344px*/
@media screen and (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }

  .heading-primary {
    font-size: 4.4rem;
  }
  .gallery {
  grid-template-columns: repeat(2, 1fr);
  }

  
}

@media screen and (max-width: 74em) {
  html{
    font-size: 56.25%;
  }
  .main-nav-list {
    gap: 3.2rem;
  }

  .header {
    padding: 3.2rem 3.2rem ;
  }
  
  .grid{
    gap: 6.4rem;
  }
  .heading-secondary {
    font-size: 2.4rem;
  }
  .heading-tertiary {
    font-size: 1.8rem;
  }

  .testmonial-container {
  padding: 3.2rem;
  }

  .btn-mobile-nav {
      display: block;
  }
  .icon-mobile-nav {
      display: block; 
  }
  .main-nav {
      display: none;
  }

}

@media screen and (max-width:62.5rem) {

  html{
    font-size: 50%;
  }
  .hero {
    max-width: 100rem;
    grid-template-columns: 1fr;
  }
  .hero-img{
    width: 80%;

  }
  .hero-img-box, .hero-text-box {
    text-align: center;
  }
  .delivered-meals {
    justify-content: center;
  }
  .gallery {
  }
  .hero {
    max-width: 100rem;
    grid-template-columns: 1fr;
  }
  .hero-img{
    width: 60%;
    text-align: center;
  }
  .delivered-meals {
    justify-content: center;
  }
  .gallery {
  grid-template-columns: repeat(6, 1fr);
  }
  .section-testmonials {
    grid-template-columns: repeat(1,1fr);
    
  }
  .logos img{
    height: 2.4rem;
  }
  
  .step-number {
    font-size: 6.4rem;
  }
  .meal-content{
    padding: 0;
  }

  .cta{
    grid-template-columns: 3fr 2fr;
  }
  .cta-form{
    grid-template-columns: 1fr;
  
  }
  /* Mobile nav moved to the 34em breakpoint */

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

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 3.2rem;
  }
  .main-nav-link:active,
  .main-nav-link:hover {
    font-size: 3.2rem;
  }
}

  @media screen and (max-width: 49em) {
    html{
      font-size: 45%;
    }
    .grid-3cols,.grid-4cols{
      grid-template-columns: repeat(2,1fr);
    }

    .diets{
      grid-column: 1/-1;
      justify-self: center;
    }

    .heading-secondary{
      font-size: 4.8rem;
    }
    .price-plan{
      width: 100%;
    }

    .grid-footer-5col{
      grid-template-columns: repeat(6,1fr);
      grid-template-rows: 1fr 1fr;
      gap: 3.2rem;
      
    }
    /* 这里变成6 */
    .nav-col{
      grid-row: 1;
      grid-column: span 2;
      justify-self: center;
    }
    .adress-col,.logo-col{
      justify-self: center;

      grid-row: 2;
      grid-column: span 3;
      
    }
    
    
  }

  @media screen and (max-width: 34em) {
    

    .grid-3cols,.grid-4cols,.grid-2cols{
      grid-template-columns: 1fr;
    }
    .section-hero{
      padding: 2rem 0 8rem 0;
    }

    .btn:link,
    .btn:visited{
      padding: 2.4rem 3.2rem;
    }
    .btn:hover{
      padding: 2.4rem 3.2rem;
    }
    .hero-img{
      width:80%;
    }

    .section-featured{
      padding: 4.8rem 0;
    }
    .logos img{
      height: 2rem;
    }

    .step-img-box:nth-child(2){
      grid-row: 1;
    }
    .step-img-box:nth-child(6){
      grid-row: 5;
    }
    .step-img-box{
      transform: translateY(2.4rem);
    }

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

    .gallery {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem;
      padding: 2rem;
    }

    .price-plan{
      width: 75%;
    }
    .plan1,.plan2{
      justify-self: center;
    }

    /* 因为我觉得这里的催他部分直接变成背景图片要好一点，所以我就改了。   
    1 图片的 */

    .cta{
        grid-template-columns: 1fr;
        height: 100vh;
        position: relative;
        background-image: linear-gradient(to right bottom,rgba(56, 217, 169, 0.402),rgba(102, 217, 232, 0.411)), url("../img/G5j0qb3WAAEOq6D.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        color: #fff;
        background-size: contain;
        height: auto;
    }
    .cta-img-box{
      display: none;
    }
    .cta  .heading-secondary{
      margin-bottom: 3.2rem;
    }
    .cta-form{
      row-gap: 1.2rem;
    }

    /* Mobile nav: visible only below 34em */
    .btn-mobile-nav {
      display: block;
    }
    .icon-mobile-nav {
      display: block; 
    }
    .main-nav {
      background-color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.5s;
      /* Hidden by default for accessibility: opacity, non-interactive, not visible */
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
    }  
    .nav-open .icon-mobile-nav[name="close-outline"] {
      display: block;
    }
    .nav-open .icon-mobile-nav[name="menu-outline"] {
      display: none;
    }
    .nav-open .main-nav {
      opacity:1;
      visibility: visible;
      pointer-events: all;
    }
  }