@media (min-width: 40.00001rem) {
  .page-wrap {
    padding-top: 1.5rem;
  }
  .container-secondary-nav {
    height: 1rem;
    padding: 0rem 1rem;
  }
#
  .hero-container,
  .container {

    height: 20vh;

  }

  .size-medium {
    width: 20.5rem;
    height: 32.5rem;
    vertical-align: bottom;
    border: 5px solid #edfcee;
    padding: 10px;
  }

  .hero-text {
    font-size: 1.6rem;
    width: 80%;
    padding-top: 1.5rem;
  }

  #menu-top-bar {
    font-size: 1.6rem;
  }
  .hero-title {
    font-size: 2.2rem;
    margin-top: 2rem;
  }

  .btn-wrapper {
    width: 15rem;
    height: 4rem;
    margin-top: 2rem;
  }

  .btn-wrapper a {
    font-size: 1.6rem;
  }

  .item-meta {
    transform: translate(-50%, 0);
  }

  .front-page-recipes {
    height: auto;
/* 	  display:grid;
    grid-template-columns: repeat(2, 1fr); */
    margin: 0 auto;
    column-gap: 2rem;
    row-gap: 3.5rem;
    width: 70%;
    align-items: normal;
    justify-content: center;

    padding: 1rem 2.5rem 2.5rem 2.5rem;
  }

  .disclaimer {
    width: 80%;
    margin: 0 auto;
  }

  footer p {
    margin: 1.8rem 0;
  }
}
/****************/
@media (min-width: 50rem) {
  .hero-container,
  .container {
    grid-template-columns: 1fr 1.75fr;
    height: 50vh;
    gap: 23rem;
  }
	.hero-inner{
		top:0%;
		width: 40%;
	}
  #menu-top-bar {
    font-size: 1.6rem;
  }
  .hero-text {
    width: 90%;
  }

  .hero-text {
    font-size: 1.6rem;
  }
  .hero-title {
    font-size: 2.2rem;
    margin-top: 0;
  }

  .btn-wrapper {
    width: 18rem;
    height: 5rem;
    margin-top: 1rem;
  }

  .btn-wrapper a {
    font-size: 1.6rem;
  }
}

@media (min-width: 57rem) {
  /* s */


  .hero-text {
    font-size: 1.8rem;
    width: 90%;
  }

  .hero-container,
  .container {
    gap: 27rem;
  }

  #menu-top-bar {
    font-size: 1.8rem;
  }

  .hero-title {
    font-size: 2.2rem;
    margin-top: 0;
  }

  .btn-wrapper {
    width: 18rem;
    height: 5rem;
	  margin-top: 1rem;
  }

  .btn-wrapper a {
    font-size: 1.6rem;
  }
	

}

@media (min-width: 63.6rem) {
  html {
    font-size: 64%;
  }
  .hero-container,
  .container {
    grid-template-columns: 1fr 1.2fr;
    height: 70vh;
    gap: 27rem;
  }
  .img-title {
    font-size: 1.6rem;
  }
  .btn-wrapper {
    width: 20rem;
    height: 6rem;
	  margin-top:1rem;
  }

  .btn-wrapper a {
    font-size: 1.6rem;
  }
/* 
   .front-page-recipes {
     grid-template-columns: repeat(4, 1fr); 
  gap: 2.25vw; 
 
	  
	display: grid:
    margin: 0 auto;
/*     max-width: 120rem;
    align-items: center;
    justify-content: center;
    padding: 0; */
/*     width: 100%; */
/*     
  }  */

  .latest {
    padding-top: 0.1rem;
  }


  .hero-text {
    font-size: 2rem;
    width: 90%;
  }
  .hero-title {
    font-size: 2.6rem;
    margin-top: 3.5rem;
  }

  .page-wrap {
    padding: calc(1.5rem + 0.2%) 0;
  }

  footer p {
    margin-bottom: 1.2rem 0;
  }

/*   .latest {
    padding-bottom: 1.5rem;
  } */

  #menu-top-bar {
    font-size: 2.2rem;
  }
}

@media (min-width: 71rem) {
  html {
    font-size: 65.5%;
  }

  .page-wrap-2 {
    font-size: 1.6rem;
  }

  .size-medium {
    width: 20vw;
    object-fit: cover;
  }
	
	  .btn-wrapper {
    width: 20rem;
    height: 6rem;
	  margin-top:1rem;
  }
}

@media (min-width: 80rem) {
  .container-nav {
    height: 10rem;
  }
  .item-meta {
    transform: translate(-50%, 0);
  }

  .size-medium {
      width: 28rem;
    height: 36.5rem;
  }
  .hero-text {
    /* min-width: 70%;
    width: 70%; */
    /* height: 90vh; */
    font-family: "Ida Narrow";
/*     font-size: 2rem; */
    padding-top: 2rem;
    text-align: center;

    width: 80%;
  }


.front-page-recipes{
	display: flex;
}



  .container-secondary-nav {
    padding: 1rem 1rem;
  }

  .hero-title {
    font-size:2.6rem;
    margin-top: 2rem;
  }

  .latest {
/*     padding-bottom: 0.5rem; */
    padding-top: 2rem;
  }
  .btn-wrapper a {
    font-size: 1.8rem;
  }

 
  .btn-wrapper {
    width: 20rem;
    height: 5.5rem;
    margin-top: 1rem;
  }
  .container-nav:not(.footer) {
    font-size: 5.2rem;
  }

  .container-secondary-nav .top-bar {
    font-size: 1.6rem;
  }

/*   #menu-top-bar {
    font-size: 2.2rem;
  } */

  .img-title {
    font-size: 1.6rem;
  }
}

@media (min-width: 84.37rem) {
  .size-medium {
     width: 28rem;
    height: 36.5rem;
  }

  .page-wrap-2 {
    font-size: 1.6rem;
  }
}

@media (min-width: 93.75rem) {
  .size-medium {
    width: 28rem;
    height: 36.5rem;
  }

  .btn-wrapper {
    width: 22.5rem;
    height: 5.5rem;
    margin-top: 3rem;
  }

  .item-meta {
    width: 12rem;
    height: 3rem;
    font-size: 1.4rem;
  }
}

@media (min-width: 112.25rem) {
  .hero-text {
    font-size: 2.2rem;
	  padding-top:4rem;
  }
  .hero-title {
    font-size: 2.8rem;
	  margin-top:1rem;
  }

	.hero-container{
		gap:32rem;
		height:50vh;
	}
  .page-wrap-2 {
    font-size: 1.8rem;
  }

  .btn-wrapper a {
    font-size: 2.2rem;
  }

  .btn-wrapper {
    width: 19rem;
    height: 6rem;
  }
  .container-nav:not(.footer) {
    font-size: 5.2rem;
  }

  .container-secondary-nav .top-bar {
    font-size: 2rem;
  }

  .img-title {
    font-size: 1.8rem;
  }

  #menu-top-bar {
    font-size: 2.6rem;
  }
}

/* BELOW 600px - smaller screens */



/*     max-width: 120rem;
    align-items: center;
    justify-content: center;
    padding: 0; */
/*     width: 100%; */
/*     
  }  */

@media (max-width: 57rem) {

	.inner-container{
		display: grid;
		grid-template-columns: 1fr 1fr;
		row-gap: 3rem;
	}
	
	.size-medium{
		width:30vw;
}}


@media (max-width: 40rem) {
	
	
	.hero-inner{
		top:10%;
	}
  #menu-top-bar {
    gap: 4rem;
  }

  .item-meta {
    margin: -15px 50%;
  }

  .container-secondary-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
  }

  html {
    font-size: 56.25%;
    white-space: normal;
  }

  body {
    min-height: auto;
  }
  .padding {
    padding-bottom: 2rem;
  }

  #menu-top-bar {
    padding-left: 0;
    white-space: nowrap;
    gap: 3rem;
    font-size: 1.6rem;
  }

  .page-wrap {
    padding: 0 12rem;
  }
  .container-secondary-nav {
    padding-top: 3rem;

    /* max-width: 60vw; */
    /* max-width: 60vw;*/
  }

  .hero-container,
  .container {
    /* max-height: 30vh; */
    max-height: 35rem;
    grid-template-columns: 0.001fr 18fr;
    gap: 39rem;
  }

  .hero-text {
    max-height: 40vh;
    
    width: 90%;
    padding-top: 0;

    font-family: "Ida Narrow";
    /* font-size: 2.4rem; */
    text-align: center;
    /* width: 2.5rem; */
  }

  .hero-title {
    font-size: 1.8rem;
    margin-top: 0;
  }

  .btn-wrapper a {
    font-size: 1.6rem;
    align-items: center;
    text-align: center;
    vertical-align: center;
  }
  .btn-wrapper {
    height: 4rem;
		width: 15rem;
	  
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 1rem;
  }

  .latest {
    padding: 2rem 3rem 0rem 3rem;
    margin: 1rem;
  }

  .front-page-recipes {
    /* display: flex; */
    /* grid-template-columns: 1fr 1fr; */

    /* align-items: center; */
    /* height: auto;
    gap: 5rem; */
    height: auto;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 auto;
    gap: 3rem;
display:grid;
    width: 70%;

    align-items: normal;
    justify-content: center;
    padding: 1rem 2.5rem 2.5rem 2.5rem;
  }
  .container-nav footer {
    padding: 0 4rem 2rem 4rem;
  }
  .disclaimer {
    padding-right: 4rem;
    padding-left: 4rem;
    /* width: 60vw; */
    margin: 0 auto;
  }
  .item {
    /* max-width: 100%;
    max-height: auto;
    object-fit: cover;*/
    justify-self: center;
  }

  .img-title {
    font-size: 1.6rem;
  }

  .size-medium {
    width: 22.5rem;
    height: 27.5rem;
    padding: 0;
    vertical-align: bottom;
  }

  img {
    padding: 1rem;
    /* display: block; */
  }

  .item-meta {
    margin: -15px 50%;
  }
}

@media (max-width: 39.88rem) {
  .item-meta {
    margin: -15px 50%;
  }

/*   .hero-container,
  .container {
    /* max-height: 30vh; */
    /* max-height: 40rem; */
/*     grid-template-columns: 1.9fr 16fr;
    gap: 33rem; */
  } */

/*   .hero-text {
    width: 90%;
  } */
	
	.btn-wrapper {
    height: 4rem;
		width: 15rem;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 1rem;
  }
}

/* BELOW 545px */
@media (max-width: 35rem) {
  .hero-text {
    max-height: 40vh;
    font-size:1.6rem;
    width: 90%;
    padding-top: 2rem;
    /* width: 2.5rem; */
  }
	
	.hero-inner{
		top:5%;
	}

  .hero-title {
    font-size: 1.8rem;
    margin-top: 0;
  }

  .latest {
    font-size: 1.6rem;
    padding-top: 1rem;
  }

  .size-medium {
    width: 20.5rem;
    height: 25.5rem;
    padding: 0;
    vertical-align: bottom;
  }

  .hero-container,
  .container {
    /* max-height: 30vh; */
    /* max-height: 40rem; */
    grid-template-columns: 1.9fr 16fr;
    gap: 28rem;
  }
  footer {
    padding-bottom: 1rem;
  }

  .front-page-recipes {
    /* display: flex; */
    grid-template-columns: 1fr 1fr;

    /* align-items: center; */
    /* height: auto;
    gap: 5rem; */
    height: auto;
    /* grid-template-columns: repeat(2, 1fr); */
    margin: 0 auto;
    gap: 3rem;
    width: 70%;

    align-items: normal;
    justify-content: center;
    padding: 1rem 2.5rem 2.5rem 2.5rem;
  }
	
	

  /************************************************/
  /*  MOBILE */
  /************************************************/
}
/* @media (max-width: 32.2rem) {
  .hero-container,
  .container {
    max-height: 30rem;
    grid-template-columns: 0.5fr 6fr;
  }

  .hero-text {
    width: 90%;
  }
} 
  


34.6rem to 40rem*/







@media (max-width: 31.25rem) {
 .btn-wrapper {
    width: 15rem;
    height: 4rem;
    margin-top: 0;
  }
}

@media (max-width: 30.625rem) {
  .hero-container,
  .container {
    /* max-height: 30vh; */
    max-height: 35rem;
    grid-template-columns: 1fr 20fr;
    gap: 29rem;
  }

  .hero-text {
    padding-top: 2.5rem;
  }

  .size-medium {
    width: 18.5rem;
    height: 22.5rem;
    padding: 0;
    vertical-align: bottom;
  }
  .btn-wrapper {
    width: 15rem;
    height: 4rem;
    margin-top: 0;
  }
}

@media (max-width: 29rem) {
  .hero-container,
  .container {
    gap: 28rem;
  }
}

@media (max-width: 27.86rem) {
  .hero-container,
  .container {
    /* max-height: 30vh; */
    /* max-height: 40rem; */
    grid-template-columns: 0fr 20fr;
    gap: 27rem;
  }

  .hero-text {
    /* width: 180px; */
    padding-top: 2rem;
    padding-right: 2rem;
  }

  .disclaimer {
    padding: 1;
  }
}

@media (max-width: 27.2rem) {
  html {
    font-size: 54%;
  }

  .hero-container,
  .container {
    /* max-height: 30vh; */
    height: 20%;
    gap: 28rem;
  }
}

@media (max-width: 26rem) {
  html {
    font-size: 53.5%;
  }

  .container-secondary-nav .top-bar {
    font-size: 1.6rem;
  }
  .container-nav:not(.footer) {
    font-size: 2.6rem;
  }

  .hero-container,
  .container {
    /* max-height: 30vh; */
    height: 20%;
    gap: 27rem;
  }

  .size-medium {
    width: 16.5rem;
    height: 20.5rem;
  }
}
@media (max-width: 25rem) {
  html {
    font-size: 52%;
  }
  .hero-container,
  .container {
    /* max-height: 30vh; */
    max-height: 35rem;
    grid-template-columns: 0.25fr 200fr;
  }
  .hero-text {
    padding-top: 4rem;
  }
  .hero-title {
    margin-bottom: 1.2rem;
  }
}
