/* Here I use 1rem = 1em = 16px */

/* BREAKPOINT (84em*16px/em = 1344px) */
@media (max-width: 84em) {
  html {
    font-size: 58%;
  }

  .testimonials-container .subheader {
    text-align: center;
  }

  .testimonials-container .header-secondary {
    text-align: center;
  }

  .section-testimonials {
    flex-direction: column;
  }

  .testimonials {
    gap: var(--space-xl);
    width: fit-content;
    margin: 0 auto;
  }

  .testimonial {
    max-width: 40rem;
  }

  .testimonials-container {
    justify-self: center;
    /* padding: var(--space-2xl); */
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery {
    justify-self: center;
    justify-content: center;
    padding: var(--space-xl);
    width: fit-content;
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery-item {
    height: 16rem;
    width: 16rem;
  }
}

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

/* BREAKPOINT (62em*16px/em = 992px) */
@media (max-width: 62em) {
  .hero {
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  .hero-imagebox {
    display: flex;
    align-self: center;
    justify-content: center;
  }

  .hero-textbox {
    padding: var(--space-2xl);
  }

  .hero-img {
    max-width: 50%;
    margin: var(--space-2xl);
  }
}

/* BREAKPOINT (55em*16px/em = 880px) */
@media (max-width: 55em) {
  html {
    font-size: 52%;
  }

  .hero-img {
    max-width: 50%;
    margin: var(--space-xl);
  }
}

/* BREAKPOINT (45em*16px/em = 720px) */
@media (max-width: 45em) {
  html {
    font-size: 47%;
  }

  .hero-img {
    max-width: 55%;
    margin: var(--space-xl);
  }
}

/* BREAKPOINT (40em*16px/em = 640px) */
@media (max-width: 40em) {
  html {
    font-size: 43%;
  }

  .section-hero {
    padding-top: var(--space-4xl);
  }
  .section-featured-in {
    padding-top: var(--space-4xl);
  }
  .section-how {
    padding-top: var(--space-4xl);
  }
  .section-meals {
    padding-top: var(--space-4xl);
  }
  .section-testimonials {
    padding-top: var(--space-4xl);
  }
  .section-plans {
    padding-top: var(--space-4xl);
  }
  .section-cta {
    padding-top: var(--space-4xl);
  }

  .header-nav {
    background-color: var(--color-bg-light);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
    padding-top: 10rem;

    /* Hide Navigation By Default (until clicked) */
    /* Step 1: Hide Navigation Visually */
    opacity: 0;

    /* Step 2: Make Navigation Inaccessible to Mouse & Keyboard */
    pointer-events: none;

    /* Step 3: Make Navigation Invisible to Screen-Readers */
    visibility: hidden;
  }

  .nav-open .header-nav {
    justify-items: center;
    opacity: 0.99;
    pointer-events: auto;
    visibility: visible;
    transition: all 300ms ease-in;
  }

  .header-nav {
    transition: all 300ms ease-in;
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .main-nav {
    flex-direction: column;
  }

  .mobile-nav {
    display: block;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: var(--font-size-2xl);
  }

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

  .form-customer-name-field {
    grid-row: 1;
    grid-column: 1/3;
  }

  .form-customer-email-field {
    grid-row: 2;
    grid-column: 1/3;
  }

  .form-customer-source-field {
    grid-row: 3;
    grid-column: 1/3;
  }

  .btn--form {
    grid-row: 4;
    grid-column: 1/3;
  }

  /* .pricing-plan {
    max-width: 25rem;
  } */
}

/* BREAKPOINT (34em*16px/em = 544px) */
@media (max-width: 34em) {
  html {
    font-size: 38%;
  }

  .hero-img {
    max-width: 65%;
    margin: var(--space-xl);
  }
}

/* BREAKPOINT (32.5em*16px/em = 520px) */
@media (max-width: 32.5em) {
  html {
    font-size: 35%;
  }
  .hero-img {
    max-width: 70%;
    margin: var(--space-lg);
  }
}

/* BREAKPOINT (30em*16px/em = 480px) */
@media (max-width: 30em) {
  html {
    font-size: 32%;
  }
}

/* BREAKPOINT (28em*16px/em = 448px) */
@media (max-width: 28em) {
  html {
    font-size: 28%;
  }
}