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

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

@media (max-width: 91em) {
}

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

@media (max-width: 75em) {
}

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

@media (max-width: 67em) {
  /* Replace the hero image with a smaller version for mobile */
  .hero-img--stapil {
    background-image: url(/pages/stapil/images/banner_artwork_website_mobile.webp);
    background-size: cover;
  }
}

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

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

  .section-prelaunch {
    margin-bottom: 1.6rem;
  }

  /* TIMELINE SECTION */

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

  .download-element--timeline {
    text-align: center;
  }

  /* PRE-LAUNCH VIDEOS SECTION */

  .heading-tertiary--prelaunch-videos {
    text-align: center;
  }

  /* Change the video grid layout */

  .grid--video-box {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 2.4rem;
  }

  .video--2 {
    grid-row: 2 / 3;
  }

  /* GALLERY */

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

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

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

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

  .section-hero--stapil,
  .hero-img--stapil {
    height: 25rem;
  }

  /* PRE-LAUNCH VIDEOS SECTION */

  .section-prelaunch-videos {
    margin-bottom: 4.8rem;
  }

  /* This over-writes the video-small because of the nature of the videos in the grid that may not be the same as video-small--global */
  .video--1,
  .video--2,
  .video--3 {
    width: 30rem;
    height: 16.875rem;
  }

  /* GALLERY */

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

  /* Change the gallery layout */

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

  .gallery-item--1 {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
  }

  .gallery-item--2 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }

  .gallery-item--3 {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
  }

  .gallery-item--4 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
  }

  .gallery-item--5 {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
  }

  .gallery-item--6 {
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }

  .gallery-item--7 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
}

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

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

  .section-hero--stapil,
  .hero-img--stapil {
    height: 20rem;
  }

  /* PRE-LAUNCH VIDEOS SECTION */

  .section-prelaunch-videos {
    margin-bottom: 2.4rem;
  }

  .grid--video-box {
    row-gap: 1.6rem;
  }

  /* This over-writes the video-small because of the nature of the videos in the grid that may not be the same as video-small--global */
  .video--1,
  .video--2,
  .video--3 {
    width: 26rem;
    height: 14rem;
  }
}