body.single{
    article{
        display: flex;
        flex-direction: column;
        padding-top: 2rem;
        align-items: center;
        & section{
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 1700px;
            &:nth-child(1){
                align-items: center;
                padding: 5rem var(--container-space) 2rem;
                position: relative;
                & .single-article-header{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    & a{
                        display: flex;
                        font-size: var(--wp--preset--font-size--s-text);
                        font-weight: 600;
                        color: var(--wp--preset--color--vert);
                        align-items: center;
                        gap: 1rem;
                        transition: gap 0.6s ease-in-out;
                        border-bottom: 1px solid var(--wp--preset--color--vert);
                        padding: 0.5rem 0;
                        &::before{
                            content: "";
                            background: url(../svg/btn_arrow_green.svg) no-repeat;
                            width: 16px;
                            height: 14px;
                            transform: rotate(-180deg);
                            transition: transform 0.6s ease-in-out;
                        }
                        &:hover{
                            gap: 2rem;
                        }
                    }
                    & h1{
                        text-align: center;
                        font-size: var(--wp--preset--font-size--xxl-title);
                        font-weight: 600;
                    }
                    & .single-article-image{
                        display: flex;
                        width: 100%;
                        position: relative;
                        border-radius: 20px;
                        height: 510px;
                        overflow: hidden;
                        & img{
                            object-fit: cover;
                            border-radius: 20px;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) scale(1.2);
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            &:nth-child(2){
                width: 100%;
                align-items: center;
                & .single-article-wrapper{
                    display: flex;
                    width: 100%;
                    flex-direction: column;
                    align-items: center;
                    padding: 0 var(--container-space);
                    & .single-last-article-container{
                        display: flex;
                        flex-direction: column;
                        width: 100%;
                        max-width: 1300px;
                        padding-bottom: 4rem;
                        & h2{
                            font-size: var(--wp--preset--font-size--xl-title);
                            font-weight: 600;
                            margin-bottom: 1rem;
                            text-transform: uppercase;
                        }
                        & .single-last-article-wrapper{
                            display: flex;
                            & .single-last-article-item{
                                display: flex;
                                flex-direction: column;
                                width: 33.33%;
                                aspect-ratio: 1/1;
                                max-height: 300px;
                                padding-right: 1rem;
                                &:last-child{
                                    padding-right: 0;
                                }
                                & a{
                                    display: flex;
                                    width: 100%;
                                    height: 100%;
                                    position: relative;
                                    flex-direction: column;
                                    & .single-last-article-img-wraper{
                                        display: flex;
                                        position: absolute;
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 12px;
                                        left: 50%;
                                        top: 50%;
                                        transform: translate(-50%, -50%);
                                        & img{
                                            object-fit: cover;
                                            border-radius: 12px;
                                            width: 100%;
                                            height: 100%;
                                        }
                                    }
                                    & .single-last-article-infos{
                                        display: flex;
                                        flex-direction: column;
                                        margin-top: auto;
                                        position: relative;
                                        z-index: 2;
                                        color: var(--wp--preset--color--blanc);
                                        padding: 1rem;
    
                                        & .single-last-article-infos-group{
                                            display: flex;
                                            align-items: center;
                                            gap: 0.5rem;
                                            & p{
                                                margin: 0;
                                            }
                                        }
                                        & .single-last-article-text{
                                            font-size: var(--wp--preset--font-size--m-text);
                                            font-weight: 600;
                                        }
                                    }
                                    &::after{
                                        content: "";
                                        position: absolute;
                                        width: 100%;
                                        height: 100%;
                                        background-color: rgba(0,0,0,0.3);
                                        border-radius: 12px;
                                        z-index: 1;
                                    }
                                }
                                
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 576px) {
    body.single{
        article{
            & section{
                &:nth-child(1){
                    & .single-article-header{
                        & h1{
                            font-size: var(--wp--preset--font-size--l-title);
                        }
                        & .single-article-image{
                            height: 210px;
                        }
                    }
                }
                &:nth-child(2){
                    padding: 0 var(--container-space);
                    & .single-article-wrapper{
                        & .single-last-article-container{
                            & h2{
                                font-size: var(--wp--preset--font-size--l-title);
                            }
                            & .single-last-article-wrapper{
                                flex-direction: column;
                                gap: 1rem;
                                & .single-last-article-item{
                                    width: 100%;
                                    aspect-ratio: 2/1;
                                    padding-right: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}