/* No HTML de referência as seções herdam o body do Bootstrap. Aqui o body
       segue o tema (cabeçalho e rodapé), então o contêiner da página recebe
       as mesmas propriedades. */
    .solidworks-design-page {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: left;
        background-color: #fff;
    }

    /* O CSS do tema define `.container { padding: 0 var(--horizontal-spacing);
       max-width: var(--max-width) }` sem media query e vence o contêiner do
       designer (Bootstrap: padding de 15px e larguras por faixa; 1152px no xl
       e 1530px acima de 1600px). O seletor com a classe da página restaura o
       contêiner do desenho só nas seções, sem afetar o cabeçalho e o rodapé
       do site. */
    .solidworks-design-page .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    @media (min-width: 576px) {
        .solidworks-design-page .container {
            max-width: 540px;
        }
    }

    @media (min-width: 768px) {
        .solidworks-design-page .container {
            max-width: 720px;
        }
    }

    @media (min-width: 992px) {
        .solidworks-design-page .container {
            max-width: 960px;
        }
    }

    @media (min-width: 1200px) {
        .solidworks-design-page .container {
            max-width: 1152px;
        }
    }

    @media screen and (min-width: 1600px) {
        .solidworks-design-page .container {
            max-width: 1530px;
        }
    }