.modules-intro{display:block;margin-bottom:20px}

.modules-intro p{font-size:16px;line-height:1.75;color:#4f6079;max-width:640px}
@media(min-width:810px) and (min-height:1000px){
  .modules-intro{position:absolute;top:calc((100vh - min(720px,100vh - 128px))/2 - var(--module-intro-height,56px) - 20px);left:0;right:0;margin:0;z-index:4;will-change:transform}
  #moduler .module-stage{padding-block:64px}
  #moduler .module-stage .feature-shell{height:min(720px,calc(100vh - 128px))}
  #moduler .module-stage{z-index:1}
  #moduler .module-stage:nth-of-type(2){z-index:2}
  #moduler .module-stage:nth-of-type(3){z-index:3}
}
/* Lavere desktopvinduer (701-999px, fx MacBook): samme kortstak, men introen
   sidder lige under topmenuen, og kortet fylder resten af hoejden i stedet for
   at blive centreret - ellers rammer introen menuen. Ved 1000px er de to
   layouts identiske (140px over kortet). */
@media(min-width:810px) and (min-height:701px) and (max-height:999px){
  #moduler{--stack-top:140px;--stack-bottom:40px}
  .modules-intro{position:absolute;top:calc(var(--stack-top) - var(--module-intro-height,56px) - 20px);left:0;right:0;margin:0;z-index:4;will-change:transform}
  #moduler .module-stage{padding-block:var(--stack-top) var(--stack-bottom);align-items:flex-start}
  #moduler .module-stage .feature-shell{height:min(720px,calc(100vh - var(--stack-top) - var(--stack-bottom)))}
  #moduler .module-stage{z-index:1}
  #moduler .module-stage:nth-of-type(2){z-index:2}
  #moduler .module-stage:nth-of-type(3){z-index:3}
}
@media(max-width:1100px){.modules-intro p{font-size:15px}}
@media(max-width:809px){.modules-intro{margin-bottom:20px}.modules-intro p{font-size:16px;max-width:530px}}
@media(max-width:480px){.modules-intro p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.modules-intro{will-change:auto}}