/* The column every page the plugin draws sits inside.

   One width, one gutter, set once by the plugin and used by the course page,
   the catalogue, the certificate check and the dashboard alike. A page the
   plugin draws then lines up with a page the theme draws, and changing the
   setting moves all of them together. */

.glt-shell{
 box-sizing:border-box;
 width:100%;
 max-width:var(--glt-shell-w,1716px);
 margin-inline:auto;
 padding-inline:var(--glt-shell-gut,clamp(16px,3.2vw,48px))
}

.glt-shell *,.glt-shell *::before,.glt-shell *::after{box-sizing:border-box}

/* Breathing room above and below, so a block does not sit hard against the
   title above it or the footer below. */
.glt-shell.has-room{padding-block:clamp(24px,3.4vw,52px)}

/* Nothing inside may push the page sideways. */
.glt-shell{overflow-x:clip}
.glt-shell img,.glt-shell iframe,.glt-shell video{max-width:100%}
.glt-shell h1,.glt-shell h2,.glt-shell h3,.glt-shell p,.glt-shell li{overflow-wrap:break-word}

/* A page that already sits inside the site's own column does not need a
   second one. Adding this class next to it turns the frame off. */
.glt-shell.is-inline{max-width:none;padding-inline:0}

@media print{
 .glt-shell{max-width:none;padding-inline:0}
}