#Index_privacyhub {
    --section-spacer: 80px;
    --privacy-icon--size: 32px;
    --grid-cols: 3;
    .pbds-banner,
    .pbds-banner * {
        --bnr--aspect: 1;
        --bnr--height: auto;
        --bnr--padding-y: 30px; 
        --bnr--padding-x: 30px;
    }
    @media (max-width: 769px) {
        --section-spacer: 60px;
        --grid-cols: 2;
    }
    @media (max-width: 600px) {
        --section-spacer: 60px;
        --grid-cols: 1;
        .pbds-banner,
        .pbds-banner * {
            --bnr--aspect: 4/3;
        }
    }
}
#Index_privacyhub {
    .subtitleCustom {
        font-size: 0.875rem;
        font-weight: 300;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--clr-gray-500);
    }
    .pbds-container {
        &.centered {
            text-align: center;
        }
        &.divided {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas: "header content";
            column-gap: calc(var(--spacer) * 2);
            row-gap: var(--spacer);
        }
        @media (max-width: 600px) {
            &.divided {
                grid-template-columns: 100%;
                grid-template-areas: "header" "content";
            }
        }
    }
    section {
        padding: var(--section-spacer) 0;
        header {
            grid-area: header;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            h2 {
                margin: 0.5rem 0 30px;
                order: 2;
            }
        }
        .content-wrapper {
            grid-area: content;
        }
        .list--wrapper {
            grid-area: list;
        }
    }
    #header {
        margin: 40px 0;
    }
    #concept {
        h2 {
            margin: 0 0 30px;
        }
        p {
            margin: 0 auto;
            width: 100%;
            max-width: 680px;
            font-size: 1.75rem;
            text-wrap: pretty;
        }
    }
    #lgpd {
        background: var(--clr-gray-100);
        a {
            color: var(--clr-black);
            text-decoration: underline;
        }
    }
    #docs {
        .pbds-container {
            grid-template-areas: "header content" "list list";
        }
        .content--wrapper {
            max-width: 480px;
            justify-self: end;
        }
        .list--wrapper {
            margin: 30px 0 0;
            ul {
                display: grid;
                grid-template-columns: repeat(var(--grid-cols),1fr);
                gap: var(--spacer);
                .cstm-docs {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-direction: column;
                    a {
                        padding: 0 0 1rem;
                    }
                    .icon {
                        display: block;
                        width: var(--privacy-icon--size);
                        aspect-ratio: 1;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            object-position: center;
                        }
                    }
                    .title {
                        display: block;
                        font-size: 1.5rem;
                        font-weight: 400;
                        text-align: center;
                        color: var(--clr-black);
                    }
                    .content {
                        width: 80%;
                        display: block;
                        font-size: 1rem;
                        text-align: center;
                        color: var(--clr-black);
                    }
                    .link {
                        display: block;
                        font-size: 1rem;
                        font-weight: 400;
                        text-align: center;
                        text-decoration: underline;
                        color: var(--clr-black);
                    }
                }
            }
        }
        @media (max-width: 600px) {
            .pbds-container {
                grid-template-areas: "header" "content" "list";
                grid-template-columns: 100%;
            }
            .content--wrapper {
                max-width: unset;
                justify-self: start;
            }
        }
    }
    #req {
        color: var(--clr-white);
        background: var(--clr-black);
        .pbds-container {
            grid-template-areas: "header list" "content list";
        }
        header {
            h2 {
                max-width: 420px;
            }
            span {
                color: var(--clr-gray-400);
            }
        }
        .content--wrapper {
            p {
                margin: 0 0 30px;
                color: var(--clr-gray-400);
                max-width: 480px;
            }
        }
        .list--wrapper {
            align-self: center;
            ul {
                display: grid;
                grid-template-columns: 1fr 1fr;
                list-style: square;
                padding-left: 30px;
                li {
                    margin: 0 0 var(--spacer);
                }
                @media (max-width: 992px) {
                    grid-template-columns: 100%;
                }
            }
        }
        @media (max-width: 600px) {
            .pbds-container {
                grid-template-areas: "header" "content" "list";
                grid-template-columns: 100%;
            }
            .content--wrapper {
                max-width: unset;
                margin: 0 0 30px;
                justify-self: start;
            }
        }
    }
    #dpo {
        .pbds-container {
            grid-template-areas: "header contact" "content contact";
        }
        header {
            h2 {
                max-width: 420px;
            }
            span {
                color: var(--clr-gray-400);
            }
        }
        .content--wrapper {
            p {
                margin: 0 0 30px;
                color: var(--clr-gray-400);
                max-width: 480px;
            }
        }
        .contact--wrapper {
            grid-area: contact;
            align-self: center;
            .pbds-type {
                display: block;
            }
            .titleSm {
                img {
                    max-width: 180px; 
                }
            }
            a {
                display: inline-block;
                margin: 0px 0 20px;
                color: var(--clr-qtr-400);
                font-weight: 400;
            }
            address {
                font-size: 0.875rem;
                color: var(--clr-gray-500);
            }
        }
        @media (max-width: 600px) {
            .pbds-container {
                grid-template-areas: "header" "content" "contact";
                grid-template-columns: 100%;
            }
        }
    }
    #cookies {
        background: var(--clr-gray-100);
        header {
            text-align: center;
            align-items: center;
        }
        .content--wrapper {
            p {
                margin: 0 auto 30px;
                max-width: 400px;
            }
            a {
                background: var(--clr-black);
            }
        }
        @media (max-width: 600px) {
            header,
            .content--wrapper {
                text-align: left;
                align-items: start;
                p {
                    max-width: 100%;
                }
            }
        }
    }
    @media (max-width: 600px) {
        
    }
}