
@media screen and (min-width: 1024px) and (min-height: 1320px) {
    /* iPad Pro */
    .wrap {max-width: 90%; padding: 0 8vw; }
    .nav {gap: 1.5vw; }
    .nav-link{padding: 0 0.2vw; }
    .ap-stage-desktop{display: block}
    .ap-responsive{display: none}
}
@media screen and (min-width: 1024px) and (max-height: 1310px) {
    /* Laptop */
    .wrap {max-width: 90%; padding: 0 4vw; }
    .nav {gap: 1.5vw; }
    .nav-link{padding: 0 0.2vw; }
     .ap-stage-desktop{display: block}
    .ap-responsive{display: none}
}
/* Styles for screens 1440px wide and up */
@media (min-width: 1440px) {
    .wrap {max-width: 85%; padding: 0 6vw; }
    .nav {gap: 1.5vw; }
    .nav-link{padding: 0 0.2vw; }
    .ap-stage-desktop{display: block}
    .ap-responsive{display: none}
}
/* 1920px and up */
@media (min-width: 1920px) {
  /* Styles for full HD or larger monitors */
    .wrap {max-width: 75%; padding: 0 6vw; }
    .nav {gap: 1.5vw; }
    .nav-link{padding: 0 0.2vw; }
    .ap-stage-desktop{display: block}
    .ap-responsive{display: none}

}

/* Widescreen (e.g. ultrawide monitors: 2560px and up) */
@media (min-width: 2560px) {
  /* Styles for ultra-wide screens */
    .wrap {max-width: 55%; padding: 0 6vw; }
    .nav {gap: 1.5vw; }
    .nav-link{padding: 0 0.2vw; }
    .ap-stage-desktop{display: block}
    .ap-responsive{display: none}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
   .headline {font-size: 40px;}
   .nav {transform: inherit; display: none;}
    nav.nav.active {display: block; }
    .about-page .grid {display: inline-block; gap: clamp(16px, 2.4vw, 28px); }
    .about-page .grid{display: inline-block;}
    .about-page .ap-mv {display: inline-block;}
    body.dark .about-page .ap-hero {background: transparent; padding: 20px 0 20px; }
    body.dark .about-page .ap-tile{margin-bottom: 20px}
    body.dark nav.nav.active {background: #000; }
    .ap-stage { height: 920px;}
    .ap-stage-desktop{display: none}
    .ap-stage-desk{display: none}
    .ap-stage.ap-responsive {
        display: block;
        height: 1070px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 990px) {
    .ap-responsive{display: none}
    .ap-stage-desktop{display: block}
}
@media only screen and (min-width: 991px) and (max-width: 1023px) {
    .ap-responsive{display: none}
    .ap-stage-desktop{display: block}
}