/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

  @media (max-width: 91rem) {
    .faq-container{
        padding: 4rem 10rem;
    }
  }

  /**************************/
  /* BELOW 1200px (Landscape Tablets) */
  /**************************/
  
  @media (max-width: 70rem) {
    .recipes{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 30px;
        grid-row-gap: 30px;
    }

    .faq-container {
        padding: 4rem 5rem;
    }

    .above-container{
        gap: 5rem;
    }
  }
  
  
  /**************************/
  /* BELOW 944px (Tablets) */
  /**************************/
  
  @media (max-width: 60rem) {
    .above-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .container-inner{
        width: 100%;
    }

    .container-inner:last-child{
        grid-area: 2 / 1 / 3 / 3;
    }

    .container-inner:last-child div{
        padding: 0 8rem;
    }
    
    .faq-container{
        display: flex;
        flex-direction: column;
    }

    .faq-question{
        width: 100%;
        text-align: center;
    }

    .faq-answear{
        width: 100%;
        font-size: 1.4rem;
        text-align: center;
    }
  }
  
  /**************************/
  /* BELOW 704px (Smaller tablets) */
  /**************************/
  
  @media (max-width: 40rem) {
    #footer{
        gap: 1rem
    }

    .footer-container{
        width: 50%
    }

    #footer img{
        width: 30%;
    }

  }
  
  /**************************/
  /* BELOW 544px (Phones) */
  /**************************/
  
  @media (max-width: 37rem) {
    .hero-inner img{
        width: 90%;
    }

    .hero-inner{
        padding-top: 10rem;
    }
    
    .above-container{
        display: flex;
        flex-direction: column;
    }
    
    .container-inner:last-child div{
        padding: 0;
    }

    .recipes{
        display: flex;
        flex-direction: column;
    }

    .above-title,.faq-title,.featured-title{
        font-size: 2rem;
    }
  }
    
  
  
  @media (max-width: 30rem) {
    .above-title,.faq-title,.featured-title{
        font-size: 1.8rem;
    }

    .above-container,.recipes{
        padding: 0 5rem;
    }

    .hero-btn{
        padding: 1rem 6rem;
    }
    
  }
  
  @media (max-width: 25rem) {

    .header{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
    grid-row-gap: 0px;
    }

    .header a:last-child{
        grid-area: 2 / 1 / 3 / 3;
    }


    .hero-btn{
        padding: 1rem 4rem;
    }

    .faq-container {
        padding: 4rem 2rem;
    }

    .hero-text{
        font-size: 1rem;
    }

    #footer{
        display: flex;
        flex-direction: column;
    }
    
    #footer img{
        width: 60%;
    }
 }