/* 16px = 1.6rem = 1em */

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

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

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

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

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

  .hero-container--downloads {
    left: 10rem;
    top: 18rem;
  }

  /* STAPIL AND USMART SOFTWARE SECTION */

  .software-agreement,
  .stapil-downloads-grid,
  .usmart-downloads-grid {
    margin-bottom: 4.8rem;
  }
}

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

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

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

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

@media (max-width: 52em) {
  /* GLOBAL */
  /* This overrides the global_general_queries.css page for all the downloads 
     pages.  This is because of the order of page includes - the last instance 
     will be used. */

  .heading-secondary--global,
  .subheading--global,
  .paragraph--global,
  span.paragraph--global,
  .download-link--global,
  .download-link--global:link,
  .download-link--global:visited,
  .download-element-heading--global,
  .download-link-support--global {
    text-align: left;
  }

  /* HERO SECTION */

  .hero-container--downloads {
    left: 6rem;
    top: 19rem;
  }

  /* STAPIL AND USMART SOFTWARE SECTIONS */

  .software-agreement,
  .stapil-downloads-grid,
  .usmart-downloads-grid {
    margin-bottom: 3.2rem;
  }

  .software-agreement-paragraph {
    font-size: 1.4rem;
  }
}

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

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

  .hero-container--downloads {
    top: 15rem;
  }


  /* Replace the hero image with a smaller version for mobile */
  .hero-img--downloads {
    background-image: linear-gradient(
        to left,
        transparent,
        var(--colour--black--transparency-highest),
        var(--colour--black--transparency-high)
      ),
      url(/pages/downloads/images/downloads_hero_mobile.webp);
  }

  /* STAPIL AND USMART SOFTWARE SECTIONS */

  .section-stapil,
  .section-usmart {
    margin-bottom: 6.4rem;
  }

  .stapil-downloads-grid,
  .usmart-downloads-grid {
    grid-template-columns: 1fr 1.5fr;
    row-gap: 1.6rem;
    column-gap: 2.4rem;
  }

  .software-agreement-paragraph {
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
  }

  /* GUIDES, ADDITIONAL INFORMATION AND BROCHURES SECTIONS */

  .section-guides,
  .section-additional,
  .section-brochures {
    margin-bottom: 6.4rem;
  }
}

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

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

  .hero-container--downloads {
    left: 4rem;
    top: 13rem;
  }

  /* STAPIL AND USMART SOFTWARE SECTIONS */

  .section-stapil,
  .section-usmart {
    margin-bottom: 4.8rem;
  }

  .software-agreement-acknowledgement {
    font-size: 1.2rem;
  }

  .software-agreement,
  .stapil-downloads-grid,
  .usmart-downloads-grid {
    margin-bottom: 2.4rem;
  }

  .stapil-downloads-grid,
  .usmart-downloads-grid {
    column-gap: 0.4rem;
  }

  /* GUIDES, ADDITIONAL INFORMATION AND BROCHURES SECTIONS */

  .section-guides,
  .section-additional,
  .section-brochures {
    margin-bottom: 4.8rem;
  }
}