/* Shrinks / Hides things on smaller screens */

/* Mobile */
@media (max-width: 620px) {
  #page-container {
    /* move the side info underneath */
    display: flex;
    flex-direction: column;
  }
  .ar-2-1-on-mobile {
    aspect-ratio: 2 / 1;
  }
  .display-f-on-mobile {
    display: flex;
  }
  .fd-c-on-mobile {
    flex-direction: column;
  }
  .gc-1-on-mobile {
    grid-column: 1;
  }
  .gc-1-3-on-mobile {
    grid-column: 1 / 3;
  }
  .gc-2-on-mobile {
    grid-column: 2;
  }
  .gc-3-5-on-mobile {
    grid-column: 3 / 5;
  }
  .gc-4-on-mobile {
    grid-column: 4;
  }
  .gc-5-7-on-mobile {
    grid-column: 5 / 7;
  }
  .gc-7-end-on-mobile {
    grid-column: 7 / -1;
  }
  .gtr-2-3-1-on-mobile {
    grid-template-rows: 3fr 1fr;
  }
  .gtr-2-1-3-on-mobile {
    grid-template-rows: 1fr 3fr;
  }
  .ml-0-on-mobile {
    margin-left: 0px;
  }
  .mr-0-on-mobile {
    margin-right: 0px;
  }
  .mr-2-on-mobile {
    margin-right: calc(var(--spacing) * 0.25);
  }
  .hide-on-mobile {
    display: none !important;
  }
  .shrink-to-1-on-mobile {
    grid-template-columns: repeat(1, 1fr);
  }
  .shrink-to-2-on-mobile {
    grid-template-columns: repeat(2, 1fr)
  }
  .shrink-to-2-auto-fc-on-mobile {
    grid-template-columns: auto fit-content(100%);
  }
  .subnav {
    flex-direction: column;
  }
  .subnav + a {
    justify-self: center;
  }
  .ta-c-on-mobile {
    text-align: center !important;
  }
  .ta-l-on-mobile {
    text-align: left !important;
  }
  .brt-4-on-mobile {
    border-radius: 0px;
    border-top-left-radius: var(--smaller); 
    border-top-right-radius: var(--smaller);
  }
  .brb-4-on-mobile {
    border-radius: 0px;
    border-bottom-left-radius: var(--smaller); 
    border-bottom-right-radius: var(--smaller);
  }
}

/* Tablet */
@media (min-width: 621px) and (max-width: 1024px) {
  #page-container {
    /* move the side info underneath */
    display: flex;
    flex-direction: column;
  }
  .display-2-on-tablet {
    order: 2;
  }
  .shrink-to-1-on-tablet {
    grid-template-columns: repeat(1, 1fr);
  }
  .shrink-to-2-on-tablet {
    grid-template-columns: repeat(2, 1fr);
  }
  .hide-on-tablet {
    display: none !important;
  }
  .show-on-mobile {
    display: none !important;
  }
}

/* Mobile or Tablet */
@media (max-width: 1024px) {
  .brt-4-on-tablet-or-mobile {
    border-radius: 0px;
    border-top-left-radius: var(--smaller); 
    border-top-right-radius: var(--smaller);
  }
  .gtc-3-on-tablet-or-mobile {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet or Desktop */
@media (min-width: 621px) {
  .gc-2-on-tablet-or-desktop {
    grid-column: 2;
  }
  .gr-1-on-tablet-or-desktop {
    grid-row: 1;
  }
  .h-100-on-tablet-or-desktop {
    height: 100%;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .gc-2-on-desktop {
    grid-column: 2;
  }
  .show-on-mobile {
    display: none !important;
  }
  .show-on-tablet {
    display: none !important;
  }
  .show-on-tablet-or-mobile {
    display: none !important;
  }
  .shrink-to-half-on-pc {
    width: 50%;
  }

  #features #land-stewards:target {
      grid-column: 1 / 5;
  }

  #features #educators:target {
      grid-column: 2 / 6;
  }

  #features #students:target {
      grid-column: 3 / 7;
  }

  #features #designers {
      grid-column: 4 / -1;
  }
  #features #designers:target {
      grid-column: 4 / -1;
  }
  #features #land-stewards:target ~ #designers,
  #features #educators:target ~ #designers,
  #features #students:target ~ #designers {
      grid-column: 7 / -1;
  }
  
  #features .show-more-btn,
  #features #designers .audience-action-btn,
  #features #land-stewards:target ~ #designers .show-more-btn,
  #features #educators:target ~ #designers .show-more-btn,
  #features #students:target ~ #designers .show-more-btn {
      display: inline-flex;
  }

  #features .audience-action-btn,
  #features :target .show-more-btn,
  #features #designers .show-more-btn,
  #features .features-details,
  #features #land-stewards:target ~ #designers .features-details,
  #features #educators:target ~ #designers .features-details,
  #features #students:target ~ #designers .features-details,
  #features #land-stewards:target ~ #designers .audience-action-btn,
  #features #educators:target ~ #designers .audience-action-btn,
  #features #students:target ~ #designers .audience-action-btn {
      display: none;
  }

  #features #designers .features-details,
  #features :target .features-details {
      display: grid;
  }

  #features :target .audience-action-btn {
    display: inline-flex;
  }
}

@media (min-width: 1250px) {
  main, footer {
      padding: 1em 20%;
  }
  header {
      padding-left: 20%;
      padding-right: 20%;
      width: 60%;
  }
}

@media (min-width: 1025px) and (max-width: 1800px) {
  .shrink-to-2-on-small-desktops {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media not (any-pointer: coarse) {
  .show-on-touchscreen {
    display: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}