/*
————————————————————— Smaller ——————————————————————
*/

@media (max-width: 1400px) {
  
  main {
    padding: 40px
  }
}

/*
—————————————————— iPad portrait ———————————————————
*/

@media (max-width: 1023px) {

  main {
    min-height: calc(100vh - 48px);
  }

  .image-panel {
    &.desktop {
      display: none;
    }
    &.mobile {
      display: block;
    }
  }
}

/*
—————————————————————— Phone ——————————————————————
*/

@media (max-width: 767px) {

  main {
    padding: 0;
    min-height: calc(100vh - 48px);
  }

  .site-nav {
    gap: 20px;
  }

  .nav-link {
    font-size: 14px;
    padding-top: 2px;
  }

  .site-header {
    height: 56px;
    padding-top: 4px;
  }

  h1.hero-heading {
    font-size: clamp(20px, 9cqi, 36px);
  }

  .waitlist-form {
    flex-direction: column;
  }

  .waitlist-form__label {
    flex: 1;
    border-right: 0;
    border-bottom: 1px solid var(--teal)
  }

  .faq-question{
    font-size: 18px;
    font-weight: 320;
    line-height: 1.4;  
  }
}

/*
—————————————————————— Larger ———————————————————————
*/

@media (min-width: 2000px) {
  
  main {
    padding: 80px
  }

  h1 {
    font-weight: 240;
  }

  .hero-sub {
    font-size: 20px;
  }

  .home-content {
    gap: 36px;
  }
}

@media (min-width: 2400px) {
  
  main {
    padding: 100px
  }
}

/*
—————————————————————— Misc ———————————————————————
*/

@media (max-height: 1000px) {

  .image-panel.desktop .image-panel__phone--1 {
    bottom: calc(65cqh - 300px);
    width: 47cqh;
  }

  .image-panel.desktop .image-panel__phone--2 {
    top: calc(75cqh - 330px);
    width: 51cqh;
  }

}

@media (max-height: 700px)  {

  .image-panel.desktop .image-panel__phone--1 {
    bottom: auto;
    top: -20px;
    width: 65%;
    max-width: 400px;
    right: auto;
    left: -5%;
  }

  .image-panel.desktop .image-panel__phone--2 {
    bottom: -20px;
    top: auto;
    width: 70%;
    max-width: 400px;
    left: auto;
    right: -5%;
  }

}