/* rem and em do NOT depend on HTMl font-size in media queries!
Instead, 1rem = 1em = 16px */

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

 @media (max-width:  84em) {
  .hero {
   max-width: 120rem;
  }

  .heading-primary {
  font-size: 4.4rem;
  }
 }

.gallery {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
}


/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em){
 html {
  /* 9px / 16 px */
  font-size: 56.25%;
 }

 grid{
  column-gap: 4.8rem;
  row-gap: 6.4rem;
 }

 .heading-secondary {
  font-size: 3.6rem;
 }

 .heading-tertiary{
  font-size: 2.4rem;
 }

 .header {
   padding: 0 3.2rem;
 }

 .main-nav-list {
  gap: 3.2rem;
 }

 .hero {
  gap: 4.8rem;
 }

 .testimonials-container {
  padding: 9.6rem 3.2rem;
 }
}


/**************************/
/* BELOW 944px (Portrait Tablets) */
/**************************/

@media (max-width: 59em) {
 html{
  /* 8px / 16 px  =0.5 */
  font-size: 50%;
 }

 .hero {
  grid-template-columns: 1fr;
  padding: 0 8rem;
  gap: 6.4rem;
 }

 .hero-text-box,
 .hero-img-box {
  text-align: center;
 }

 .hero-img {
  width: 60%;
 }
 .delivered-meals{
  justify-content: center;
  margin-top: 3.2rem;
 }

 .logos img{
  height: 24px;
 }
 .step-number{
  font-size: 7.4rem;
 }

 .meal-content{
  padding: 2.4rem 3.2rem 3.2rem 3.2rem;
 }

 .section-testimonials{
  grid-template-columns: 1fr;
 }

 .gallery{
  grid-template-columns: repeat(6, 1fr);
 }

 .cta{
  /* 3/5 = 60% + 2/5 = 40% */
  grid-template-columns: 3fr 2fr;
 }

 .cta-form{
  grid-template-columns: 1fr;
 }

 .btn--form{
  margin-top: 1.2rem;
 }

 /*MOBILE NAVIGATION*/
 .btn-mobile-nav {
  display: block;
 }

 .main-nav{
  background-color: rgba(255, 255, 255, 0.97);
  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;

  /*hide navigation */
  /*allows NO transitions at all!!*/
  /*display: none;*/

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

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

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

 .nav-open .main-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;
 }

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

 .main-nav-link:link,
 .main-nav-link:visited {
  font-size: 3rem;
 }
}

/**************************/
/* BELOW 704px (Smaller Mobile Navigation) */
/**************************/

@media (max-width: 44em) {
 .grid--3-cols,
 .grid--4-cols {
  grid-template-columns: repeat(2, 1fr);
 }

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

 .heading-secondary {
  margin-bottom: 4.8rem;
 }

  .pricing-plan {
   width: 100%;
  }

 .grid--footer {
  grid-template-columns: repeat(6, 1fr);
 }

 .logo-col, .address-col{
grid-column: span 3;
 }

 .nav-col{
  grid-row: 1;
  grid-column: span 2;
  margin-bottom: 3.2rem;
 }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
 .grid {
    row-gap: 4.8rem;
 }

 .grid--2-cols,
 .grid--3-cols,
 .grid--4-cols {
    grid-template-columns: 1fr;
 }

 .btn,
 .btn:link,
 .btn:visited {
  padding: 2.4rem 1.6rem;
 };

 .section-hero {
  padding: 2.4rem 0 6.4rem 0;
 }

 .hero{
  padding: 0 3.2rem;
 }

 .hero-img{
  width: 80%;
 }

 .logos img{
  height: 1.2rem;
 }

 .step-img-box:nth-child(2){
  grid-row: 1;
 }

 .step-img-box:nth-child(6){
  grid-row: 5;
 }

 .step-img-box{
  transform: translateY(24);
 }

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

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

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

 .cta-text-box{
 padding: 3.2rem;
 }

 .cta-img-box{
  height: 32rem;
  grid-row: 1;
 }
}

/*
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/