#sustshop,
#sustshop * {
    --clr-green: #687B4f;
    --section--spacer: 60px;
    @media (max-width: 992px) {
        --section--spacer: 40px;
    }
}
#sustshop {
    margin: 40px 0 60px;
    .green {
        color: var(--clr-green);;
    }
    .content--wrapper {
        max-width: 740px;
        margin: 0 auto;
        &.centered {
            text-align: center;
            text-wrap: pretty;
        }
    }
    .list--wrapper {
        max-width: 1020px;
        margin: 0 auto;
        > ul {
            margin: 40px 0 0;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 20px 80px;
            li {
                margin: 0;
                padding: 0;
                img {
                    display: block;
                    margin: 0 auto 20px;
                    object-position: center;
                }
                span {
                    display: block;
                    text-align: center;
                    font-size: 0.875rem;
                }
            }
        }
        @media (max-width:1180px) {
            max-width: 720px;
        }
        @media (max-width: 992px) {
            > ul {
                grid-template-columns: repeat(2,1fr);
            }
        }
    }
    .video--wrapper {
        width: 100%;
        max-width: 1246px;
        margin: 0 auto;
        &.centered {
            text-align: center;
        }
        &.small {
            max-width: 736px;
        }
        @media (max-width:1180px) {
            max-width: 860px;
        }
    }
    .side--wrapper {
        margin: var(--section--spacer) 0 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "media content";
        gap: 30px;
        .media {
            grid-area: media;
            width: 100%;
            align-self: center;
        }
        .content {
            grid-area: content;
            max-width: 90%;
            align-self: center;
            text-wrap: pretty;
            h3 {
                margin: 20px 0;
            }
            ul {
                list-style: unset;
                padding: 0 0 0 20px;
                li {
                    margin: 0 0 10px;
                }
            }
        }
        &:nth-of-type(odd) {
            grid-template-areas: "content media";
            .content {
                max-width: 100%;
            }
        }
        @media (max-width: 992px) {
            grid-template-columns: 100%;
            grid-template-areas: "media" "content";
        }
    }
    header {
        margin: 10px 0 40px;
    }
    #esg {
        h2 {
            font-weight: 500;
            margin: 0 0 40px;
        }
        .box--full {
            text-align: center;
            padding: 60px 20px;
            background: var(--clr-green);
            border-radius: 5px;
            > span,
            p {
                color: var(--clr-white);
            }
            p{
                margin: 24px 0 0;
            }
            @media (max-width: 992px) {
                width: calc(100% + 2 * 20px);
                margin-left: -20px;
                padding: 30px;
                border-radius: 0;
            }
        }
        .box--wrapper {
            margin: 10px 0 0;
            display:grid;
            grid-template-columns: repeat(4,1fr);
            gap: 20px 30px;
            @media (max-width: 1180px) {
                grid-template-columns: repeat(2,1fr);
            }
            @media (max-width: 992px) {
                margin: 20px 0 0;
                grid-template-columns: 100%;
            }
        }
        .box.simple {
            border-radius: 5px;
            padding: 30px;
            border: 1px solid var(--clr-gray-200);
            > span {
                display: block;
                font-weight: 700;
                color: var(--clr-green);
                img {
                    vertical-align: middle;
                }
            }
            p, li {
                margin: 0;
                font-size: 0.875rem;
                font-weight: 400;
            }
            ul {
                margin: 10px 0 0;
                padding: 0 0 0 20px;
                list-style: unset;
                li {
                    margin: 0 0 10px;
                }
            }
        }
    }
    #certificacao {
        margin: var(--section--spacer) 0 0;
        span {
            font-weight: 700;
            
        }
    }
    #parametros {
        margin: var(--section--spacer) 0 0;
        h2 {
            margin: 0 0 20px;
        }
    }
    #video {
        margin: var(--section--spacer) 0 0;
        .pbds-video {
            aspect-ratio: 1246 / 701;
        }
    }
    #unidade {
        margin: var(--section--spacer) 0 0;
        h2, h2 + span {
            display: block;
            margin: 0 0 20px;
        }
    }
    #iniciativas {
        margin: var(--section--spacer) 0 0;
        h2 {
            margin: 0 0 20px;
        }
        .pbds-video {
            aspect-ratio: 736 / 414;
        }
    }
}