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

/* ********************************* */
/* BELOW 1456px */
/* Smaller desktops */
/* ********************************* */

@media (max-width: 91em) {
  /* HERO SECTION */

  .hero-container--contact {
    top: 22rem;
  }

  /* CONTACT BOX */

  .section-contact {
    margin-bottom: 9.6rem;
  }

  .contact-box {
    padding: 4.8rem;
  }

  .grid--contact {
    gap: 3.2rem;
  }

  /* FORM BOX */

  .form-box {
    padding: 4.8rem;
  }

  .heading-secondary--form {
    font-size: 4.4rem;
  }
}

/* ********************************* */
/* BELOW 1200px */
/* Landscape Tablets */
/* ********************************* */

@media (max-width: 75em) {
  /* HERO SECTION */

  .hero-container--contact {
    top: 18rem;
  }

  /* CONTACT BOX */

  .contact-box {
    padding: 4.8rem 2.4rem;
  }

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

  .contact-heading {
    font-size: 3rem;
  }

  .grid--contact {
    column-gap: 4.8rem;
    row-gap: 3.2rem;
  }

  .contact-icon {
    width: 3.2rem;
    height: 3.2rem;
  }

  .contact-text {
    font-size: 2rem;
  }

  /* FORM BOX */

  .form-box {
    padding: 4.8rem 2.4rem;
  }

  .form label {
    font-size: 1.8rem;
  }

  .form input,
  .form textarea,
  .form select {
    font-size: 1.6rem;
  }
}

/* ********************************* */
/* BELOW 1072px */
/* Tablets */
/* ********************************* */

@media (max-width: 67em) {
  /* HERO SECTION */

  .hero-container--contact {
    top: 22rem;
  }

  /* CONTACT BOX */

  .section-contact {
    margin-bottom: 8rem;
  }

  .grid--contact {
    column-gap: 3.2rem;
  }

  .contact-icon {
    padding: 0.8rem;
    margin-bottom: 1.6rem;
  }

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

  .contact-text {
    font-size: 1.6rem;
  }

  .google-map-address {
    width: 17rem;
    height: 12rem;
  }

  /* FORM BOX */

  .heading-secondary--form {
    font-size: 3rem;
    margin-bottom: 4.8rem;
  }

  .form label {
    font-size: 1.6rem;
  }
}

/* ********************************* */
/* BELOW 832px */
/* Small Tablets */
/* ********************************* */

@media (max-width: 52em) {
  /* HERO SECTION */

  .hero-container--contact {
    top: 19rem;
  }

  /* CONTACT BOX */

  .section-contact {
    margin-bottom: 6.4rem;
  }

  .grid--contact {
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-content: center;
  }

  .heading-secondary--contact {
    padding: 0 9.6rem 2.4rem 9.6rem;
    border-bottom: solid 1px var(--colour--primary-tint-dark);
    margin-bottom: 2.4rem;
  }

  /* Change the grid pattern of the contact box to have the header on the left, 
     and body on the right */

  .contact-header--email {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .contact-header--location {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .contact-body--phone {
    grid-column: 2 / 3;
    border-bottom: solid 1px var(--colour--primary-tint-dark);
  }

  .contact-body--email {
    grid-column: 2 / 3;
    border-bottom: solid 1px var(--colour--primary-tint-dark);
  }

  .contact-body--location {
    grid-column: 2 / 3;
  }

  .contact-field {
    margin-bottom: 3.2rem;
  }

  span.contact-text {
    margin-bottom: 0.8rem;
  }

  .google-map-address {
    width: 20rem;
    height: 10rem;
  }

  /* FORM BOX */

  .section-form {
    margin-bottom: 8rem;
  }

  .form-box {
    padding: 3.2rem 2.4rem;
  }

  .heading-secondary--form {
    line-height: 1.4;
    margin-bottom: 2.4rem;
  }

  .form {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  /* Change the pattern of the grid elements to extend the full width of the box */

  .name,
  .email,
  .commentBox,
  .referral,
  .button--form {
    grid-column: 1 / -1;
  }

  .button--form {
    margin-top: 1.6rem;
  }

  .form label {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }

  .form input,
  .form textarea,
  .form select {
    font-size: 1.4rem;
  }
}

/* ********************************* */
/* BELOW 640px */
/* Phones */
/* ********************************* */

@media (max-width: 40em) {
  /* HERO SECTION */

  .hero-container--contact {
    right: 5rem;
    top: 15rem;
  }

  /* CONTACT BOX */

  .section-contact {
    margin-bottom: 4.8rem;
  }

  .contact-box {
    padding: 3.2rem 2.4rem;
  }

  .grid--contact {
    column-gap: 1.2rem;
    row-gap: 2.4rem;
  }

  .heading-secondary--contact {
    font-size: 3rem;
    padding: 0 0.4rem 2.4rem 0.4rem;
  }

  .contact-icon {
    width: 2.4rem;
    height: 2.4rem;
  }

  .contact-heading {
    font-size: 1.8rem;
  }

  .contact-field {
    margin-bottom: 2.4rem;
  }

  .contact-text {
    font-size: 1.4rem;
  }

  .google-map-address {
    width: 14rem;
  }

  /* FORM BOX */

  .heading-secondary--form {
    font-size: 2.4rem;
    letter-spacing: var(--letter-spacing--medium);
    padding: 0 3.2rem;
  }
}

/* ********************************* */
/* BELOW 368px */
/* Small Phones */
/* ********************************* */

@media (max-width: 23em) {
  /* HERO SECTION */

  .hero-container--contact {
    right: 3rem;
    top: 13rem;
  }

  /* CONTACT BOX */

  .contact-box {
    padding: 2.4rem 1.2rem;
  }

  .heading-secondary--contact {
    font-size: 2.4rem;
  }

  .grid--contact {
    row-gap: 1.6rem;
  }

  .contact-icon {
    margin-bottom: 1.2rem;
  }

  .contact-heading,
  span.contact-text {
    font-size: 1.4rem;
  }

  .contact-field {
    margin-bottom: 1.6rem;
  }

  .contact-text {
    font-size: 1.2rem;
  }

  .google-map-address {
    width: 12rem;
  }

  /* FORM BOX */

  .form-box {
    padding: 2.4rem 1.2rem;
  }

  .heading-secondary--form {
    font-size: 2rem;
    line-height: var(--line-height--small);
  }

  .form label {
    font-size: 1.2rem;
  }

  .form input,
  .form textarea,
  .form select {
    font-size: 1.2rem;
  }
}