#layout{
    width:1200px;box-sizing:border-box;margin:auto;padding:1rem;
}
#layout header{
    display:flex;width:100%;align-items:center;
}
#layout header h1{
    flex-grow:1;flex-shrink:0;
}
main{
    margin-top:var(--gap-5);
}
pre{
    color:var(--quote-text-color);background:var(--quote-background-color);
}
header h1 span{
    display:inline-block;
}
header h1 span+span::before{
    content:' - ';
}

@media (max-width:36em){ /* <=576 */

}
@media (max-width:48em){ /* <=768 */

}
@media (max-width:62em){ /* <=992 */
    header{
        flex-direction:column;
        text-align:center;
    }
    header h1 span{
        display:block;
    }
    header h1 span::before{
        display:none;
    }
}
@media (max-width:75em){ /* <=1200 */
    #layout{
        width:100vw;
    }
}
@media (max-width:87.5em){ /* <=1400 */

}
@media (max-width:120em){ /* <=1920 */

}