#commercialworks,
#commercialworks * {
    --section--spacer: 60px;
    --bnr--height: 640px;
    --bnr--content-max: 60%;
    --bnr--title-font: 3rem;
    --bnr--subtitle-font: 1.125rem;
    --bnr--align-y: center;
    @media (max-width:1180px) {
        --bnr--height: 445px;
        --bnr--content-max: 80%;
        --bnr--title-font: 2.5rem;
        --bnr--subtitle-font: 1rem;
    }
    @media (max-width:769px) {
        --bnr--height: 562px;
        --bnr--content-max: 100%;
        --bnr--title-font: 2rem;
        --bnr--padding-y: 40px;
        --section--spacer: 40px;
    }
}
#commercialworks {
    margin: 40px 0 0;
    header {
        margin: 10px 0 0;
    }
    .content--wrapper {
        text-align: center;
        .content {
            max-width: 940px;
            margin: 0 auto;
            h2 {
                margin: 0 0 20px;
            }
        }
    }
    .list {
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            gap: 20px;
            > li {
                margin: 0 0 20px;
                > * {
                    margin: 0 auto 8px;
                    display: block;
                }
            }
        }
    }
    .pin-spacer,
    #ambientes {
        background: linear-gradient(0deg, #E6EAF2 60%, #FFFFFF 60%);
    }
    .pb23-gallery--scrollh {
        height: 430px;
        margin-top: 60px;
        .sticky {
            overflow: hidden;
            position: sticky;
            top: 0;
            height: 430px;
            .scroll_section {
                position: absolute;
                top: 0;
                height: 100%;
                width: auto;
                will-change: transform;
                display: flex;
                gap: 20px;
                align-items: center;
                padding: 0 5vw;
                img {
                    object-fit: cover;
                    object-position: center;
                    border-radius: 5px;
                    max-height: 327px;
                    min-width: 495px;
                }
                .showGallery {
                    text-decoration: none;
                    .shopTitle {
                        font-size: 1rem;
                        font-weight: 300;
                        color: var(--color-darkest);
                    }
                }
            }
        }
        @media (max-width: 440px) {
            height: 180px;
            .sticky {
                overflow: hidden;
                overflow-x: auto;
                .scroll_section {
                    height: auto;
                    img {
                        max-height: 190px;
                    }
                }
            }
        }
    }
    .pswp--zoom-allowed {
        .pswp__img {
            object-fit: contain;
        }
    }
    #mainbanner {
        margin: var(--section--spacer) 0 0;
    }
    #redesfranquias {
        margin: var(--section--spacer) 0 0;
        .list {
            margin: var(--section--spacer) 0 0;
            li {
                max-width: 236px;
                img {
                    max-height: 40px;
                }
            }
        }
    }
    #parceiros {
        .list {
            margin: var(--section--spacer) auto 0;
            max-width: 900px;
            ul {
                column-gap: 60px;
                li {
                    max-width: 100px;
                }
            }
        }
    }
    #ambientes {
        padding: 0 auto var(--section--spacer);
        .content {
            max-width: 720px;
        }
    }
    #video {
        .pbds-video {
            aspect-ratio: 1920 / 808;
        }
    }
    #sustentabilidade {
        margin: var(--section--spacer) auto 0;
        .special-content {
            display: grid;
            grid-template-columns: 200px 1fr;
            grid-template-areas: "media content";
            gap: 60px;
            h2 {
                margin: 0 0 20px;
                font-size: 1.75rem;
            }
            p {
                font-size: 1.25rem;
            }
            @media(max-width: 769px) {
                grid-template-columns: 100%;
                grid-template-areas: "media" "content";
            }
        }
    }
    #contato {
        margin: var(--section--spacer) auto;
        background: linear-gradient(90deg,var(--clr-white) 50%,var(--clr-qtr-100) 50%);
        .contato--wrapper {
            display: grid;
            grid-template-columns: 400px 1fr;
            grid-template-areas: "form testimonials";
            gap: 210px;
        }
        h2 {
            margin: 0 0 40px;
        }
        form {
            label {
                width: 100%;
                margin: 0 0 10px;
            }
        }
        .content {
            padding: 98px 0 98px 190px;
            border-radius: 5px 0 0 5px;
            background: var(--clr-qtr-100);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            span {
                display: block;
                margin: 0 0 20px;
            }
            ul {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 30px 20px;
                img {
                    width: 100%;
                }
            }
        }
        @media (max-width: 1540px) {
            background: linear-gradient(90deg,var(--clr-white) 610px,var(--clr-qtr-100) 610px);
            .content {
                padding: 20px 20px 20px 15%;
            }
        }
        @media (max-width: 1380px) {
            .contato--wrapper {
                gap: 20px;
            }
            .content {
                ul {
                    grid-template-columns: 100%;
                }
            }
        }
        @media (max-width: 992px) {
            background: var(--clr-white);
            .contato--wrapper {
                grid-template-columns: 100%;
                grid-template-areas: "form" "testimonials";
            }
            .content {
                width: calc(100% + 2 * 20px);
                margin-left: -20px;
                padding: 30px 40px;
                border-radius: 0;
                ul {
                    width: 100%;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 30px 20px;
                }
            }
        }
    }
}