#Index_2026ciclo1 {
    --header--spacer: 40px;
    --section--spacer: 120px;
    @media (max-width: 992px) {
        --section--spacer: 60px;
    }
    padding-top: calc(var(--menu-height) + 60px) !important;
    .pbds-header--new-cycle {
        padding-bottom: var(--header--spacer);
        .pbds-container {
            grid-template-areas: "title title" "subtitle content";
            .subtitle {
                justify-self: start;
                img {
                    max-width: 72px;
                }
            }
            .content {
                justify-self: end;
            }
        }
    }
    section:has(.content--wrapper) {
        padding: var(--section--spacer) 0;
        .content--wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-areas: "content image";
            &:has(.colorcompose) {
                grid-template-areas: "content image" "sizes pagination" "colorcompose colorcompose";
            }
            &.invert {
                grid-template-areas: "image content";
                .content {
                    padding: 0 0 0 var(--section--spacer);
                }
                .image {
                    padding: 0 var(--section--spacer) 0 0;
                }
            }
            @media (max-width: 992px) {
                grid-template-columns: 100%;
                grid-template-areas: "content" "image";
                &:has(.colorcompose) {
                    grid-template-areas: "content" "image" "sizes" "pagination" "colorcompose";
                }
                &.invert {
                    grid-template-areas: "content" "image";
                }
            }
            h3 {
                margin: 0 0 1rem;
                font-size: var(--type--size);
                font-weight: 400;
                line-height: var(--type--line);
                letter-spacing: var(--type--spacing);
            }
            > .content {
                grid-area: content;
                padding: 0;
                header {
                    position: relative;
                    margin: 0 0 var(--header--spacer);
                    h2 {
                        font-size: var(--type-display01--size);
                        font-weight: var(--type-display01--weight);
                        line-height: var(--type-display01--line);
                        letter-spacing: var(--type-display01--spacing);
                        text-transform: uppercase;
                        margin: 0;
                    }
                    .subtitle {
                        font-weight: 400;
                    }
                    > img {
                        width: 72px;
                        position: absolute;
                        top: 0px;
                        right: var(--section--spacer);
                        object-fit: contain;
                        object-position: center;
                    }
                }
                ul:has(.color) {
                    max-width: 280px;
                    margin: 15% 0 0;
                    display: grid;
                    grid-template-columns: repeat(3,1fr);
                    gap: 40px;
                    li {
                        text-align: center;
                        img {
                            height: 98px;
                            text-align: center;
                        }
                        span {
                            display: block;
                            font-size: var(--type-Sm--size);
                            font-weight: 400;
                            line-height: var(--type-Sm--line);
                            letter-spacing: var(--type-Sm--spacing);
                            text-transform: uppercase;
                            text-align: center;
                        }
                    }
                }
                @media (max-width: 992px) {
                    padding: 0 0 calc(var(--section--spacer)/2) !important;
                }
                @media (max-width: 769px) {
                    header {
                        > img {
                            right: 0px;
                        }
                    }
                }
            }
            > .image {
                grid-area: image;
                padding: 0 0 0 var(--section--spacer);
                img {
                    display: block;
                    max-width: 100%;
                }
                .legend {
                    margin: 4px 0 0;
                    display: block;
                    font-size: var(--type-Sm--size);
                    font-weight: 400;
                    line-height: var(--type-Sm--line);
                    letter-spacing: var(--type-Sm--spacing);
                    text-transform: uppercase;
                }
                @media (max-width: 992px) {
                    padding: 0 !important;
                }
            }
            > .sizes {
                --sizeProp: 100px;
                padding: var(--section--spacer) 0;
                grid-area: sizes; 
                ul {
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-end;
                    flex-wrap: wrap;
                    gap: 20px;
                    margin: 0;
                    padding: 0;
                    li {
                        img {
                            display: block;
                            width: 100%;
                        }
                    }
                }
                @media (max-width: 992px) {
                    padding: calc(var(--section--spacer)/2) 0 !important;
                }
            }
            > .pagination {
                grid-area: pagination;  
                padding: var(--section--spacer) 0 var(--section--spacer) var(--section--spacer);
                ul {
                    width: auto;
                    display: inline-grid;
                    grid-template-columns: repeat(3,auto);
                    gap: 20px;
                }
                @media (max-width: 992px) {
                    padding: calc(var(--section--spacer)/2) 0 !important;
                }
            }
            > .colorcompose {
                grid-area: colorcompose; 
                @media (max-width: 992px) {
                    padding: calc(var(--section--spacer)/2) 0 !important;
                }   
            }
        }
    }
    #carraraicon {
        .content {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: auto 1fr auto;
            grid-template-areas: "header" "info" "sizes";
            header {
                grid-area: header;
            }
            p {
                max-width: 55%;
                margin-top: 5%;
                grid-area: info;
            }
            .sizes {
                --sizeProp: 92px;
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;
                flex-wrap: wrap;
                gap: 20px;
                margin: 0;
                padding: 0;
                li {
                    img {
                        display: block;
                        width: 100%;
                    }
                    &:nth-of-type(1) {
                        width: calc(var(--sizeProp) * 1.2);
                    }
                    &:nth-of-type(2) {
                        width: calc(var(--sizeProp) * 1.6);
                    }
                    &:nth-of-type(3) {
                        width: calc(var(--sizeProp) * 1.2);
                    }
                    &:nth-of-type(4) {
                        width: calc(var(--sizeProp) * 0.6);
                    }
                    &:nth-of-type(5) {
                        width: calc(var(--sizeProp) * 0.6);
                    }
                    &:nth-of-type(6) {
                        width: calc(var(--sizeProp) * 0.9);
                    }
                    &:nth-of-type(7) {
                        width: calc(var(--sizeProp) * 0.7);
                    }
                }
            }
        }
    }
    #carraraiconsoft {
        .content {
            header {
                h2 {
                    max-width: 224px;
                }
            }
            p {
                max-width: 320px;
                margin-top: 5%;
            }
        }
    }
    #gouache {
        .content {
            p {
                max-width: 370px;
                margin-top: 5%;
            }
        }
        .image {
            padding: 0 0 0 calc(var(--section--spacer) - 80px);
        }
        .sizes {
            ul {
                li {
                    &:nth-of-type(1) {
                        width: calc(var(--sizeProp) * 1.5);
                    }
                    &:nth-of-type(2) {
                        width: calc(var(--sizeProp) * 0.75);
                    }
                }
            }
        }
        .pagination {
            ul {
                li {
                    &:nth-of-type(1),
                    &:nth-of-type(2),
                    &:nth-of-type(3) {
                        img {
                            height: 140px;
                        }
                    }
                    &:nth-of-type(4) {
                        img {
                            height: 140px;
                        }
                    }
                    &:nth-of-type(5) {
                        img {
                            height: 140px;
                        }
                    }
                    &:nth-of-type(6) {
                        img {
                            height: 140px;
                        }
                    }
                }
            }
        }
        .colorcompose {
            ul {
                display: inline-flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 40px;
                li {
                    img {
                        height: 200px;
                    }
                }
            }
            @media (max-width: 1180px) {
                ul {
                    display: inline-grid;
                    grid-template-columns: repeat(4,auto);
                    gap: 40px;
                }
            }
            @media (max-width: 620px) {
                ul {
                    grid-template-columns: repeat(3,auto);
                }
            }
            @media (max-width: 490px) {
                ul {
                    grid-template-columns: repeat(2,auto);
                }
            }
        }
    }
    #liverpool {
        .content {
            p {
                max-width: 370px;
                margin-top: 5%;
            }
            ul:has(.color) {
                grid-template-columns: repeat(4,1fr);
                li {
                    img {
                        height: 112px;
                    }
                }
            }
        }
        .image {
            padding: 0 0 0 calc(var(--section--spacer) - 80px);
        }
        .sizes {
            ul {
                li {
                    &:nth-of-type(1) {
                        width: calc(var(--sizeProp) * 0.75);
                    }
                }
            }
        }
        .pagination {
            ul {
                grid-template-columns: repeat(2,auto);
                li {
                    &:nth-of-type(1) {
                        img {
                            height: 140px;
                        }
                    }
                    &:nth-of-type(2) {
                        img {
                            height: 150px;
                        }
                    }
                    &:nth-of-type(3) {
                        img {
                            height: 120px;
                        }
                    }
                    &:nth-of-type(4) {
                        justify-self: end;
                        img {
                            height: 120px;
                        }
                    }
                }
            }
        }
        .colorcompose {
            ul {
                display: inline-grid;
                grid-template-columns: repeat(5,auto);
                column-gap: 75px;
                row-gap: 40px;
                li {
                    img {
                        height: 120px;
                        object-fit: contain;
                    }
                }
            }
            @media (max-width: 1180px) and (min-width: 600px) {
                ul {
                    display: inline-flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-wrap: wrap;
                    column-gap: 40px;
                }
            }
            @media (max-width: 600px) {
                ul {
                    grid-template-columns: repeat(2,auto);
                    column-gap: 20px;
                }
            }
            @media (max-width: 450px) {
                ul {
                    grid-template-columns: 100%;
                }
            }
        }
    }
    #close {
        padding: var(--section--spacer) 0;
        background: linear-gradient(180deg,transparent 50%,#f2ede2 50%);
        .wrapper {
            max-width: 720px;
            width: calc(100% - 40px);
            margin: 0 auto;
            display: grid;
            grid-template-columns: 120px 1fr 120px;
            grid-template-areas: "logo image content";
            gap: 20px;
            img.logo {
                grid-area: logo;
                max-width: 96px;
                width: 100%;
                justify-self: end;
            }
            img.banner {
                grid-area: image;
            }
            p {
                grid-area: content;
                margin: 0;
                align-self: end;
            }
        }
        @media (max-width: 769px) {
            .wrapper {
                grid-template-columns: 72px 1fr ;
                grid-template-areas: "logo image" "content content";
                p {
                    text-align: center;
                }
            }
        }
    }
}