.posts-grid {
    display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);

    &.bookmarked-posts {
        padding: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--80);
    }

    .post {
        position: relative;
        text-decoration: none;
        display: grid;
        grid-template-columns: 40% 1fr;
        container-type: inline-size;

        @media only screen and (max-width: 1024px) {
            grid-template-columns: 1fr;
        }

        .post-thumbnail {

            position: relative;
            overflow: hidden;
    
            @container (max-width: 600px) {
                grid-column: 1 / -1;
    
                &>img { 
                    aspect-ratio: 16 / 9;
                }
            }
            overflow: hidden;
    
            .post-format {
                position: absolute;
                top: 0;
                left: 0;
                padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
                color: var(--wp--preset--color--white);
                background-color: var(--wp--preset--color--bnpp-green);
                text-transform: uppercase;
                letter-spacing: 1px;
                display: flex;
                align-items: center;
                gap: 6px;
                font-weight: 400;
                z-index: 999;
    
                svg {
                    width: 25px;
                    height: 25px;
                }
            }
    
            &>img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: 300ms;
    
                @media only screen and (max-width: 1024px) {
                    aspect-ratio: 16 / 9;
                }
            }
    
        }


        .post-content {
            padding: var(--wp--preset--spacing--40);
            background-color: var(--wp--preset--color--white);
            border: solid 1px var(--wp--preset--color--light-grey);
            display: flex;
            flex-direction: column;
            gap: var(--wp--preset--spacing--40);

            @container (max-width: 600px) {
                grid-column: 1 / -1;
                border-left: solid 1px var(--wp--preset--color--light-grey)!important;
            }
        
            @media only screen and (min-width: 1024px) {
                border-left: none;
            }
    
            * {
                color: var(--wp--preset--color--black);
            }
    
            &>p {
                font-weight: 300;
                font-size: var(--wp--preset--font-size--medium);
                margin: 0;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
    
            h3 {
                font-size: var(--wp--preset--font-size--heading-xs);
                margin: 0;

                .highlight {
                    color: var(--wp--preset--color--bnpp-green);
                }
            }
    
            .post-meta {
        
                display: flex;
                flex-wrap: wrap;
                gap: var(--wp--preset--spacing--40);
                align-items: center;
  
                .regular-publication {
                    font-size: var(--wp--preset--font-size--body-s);
                    margin: 0;
                    text-transform: uppercase;
                    color: var(--wp--preset--color--bnpp-green);
                }
        
                .post-category {
                    background-color: var(--wp--preset--color--bnpp-green-tint-20);
                    width: fit-content;
                    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
                    border-radius: 50px;
                    font-size: var(--wp--preset--font-size--body-s);
                    margin: 0;
                    margin-left: auto;
                }
            }
    
            .post-info {
        
                display: flex;
                flex-wrap: wrap;
                flex: 1;
                gap: var(--wp--preset--spacing--40);
                align-items: center;
                justify-content: space-between;
    
                .author-images {
                    display: flex;
                    align-items: center;
                
                    img {
                        --imageSize: 70px;
                        border-radius: 50%;
                        width: var(--imageSize);
                        height: var(--imageSize);
                        border: solid 4px var(--wp--preset--color--bnpp-green-tint-30);
                        &:not(:nth-child(odd)) {
                            margin-left: calc(var(--wp--preset--spacing--40) / -1);
                        }

                        & + .authors {
                            margin-left: var(--wp--preset--spacing--40);
                        }
                    }
                }
    
                .authors {

                    margin: 0;
                    font-size: var(--wp--preset--font-size--body-s);
                    
                    span {
                        display: block;
                        font-weight: 300;
                    }
    
                }
    
                .date {
                    color: var(--wp--preset--color--charcoal);
                    font-size: var(--wp--preset--font-size--body-s);
                    margin: 0;
                    font-weight: 400;
                }
            }
        }

        &:hover{

            .post-thumbnail {
                img {
                    transform: scale(1.05);
                }
            }
    
        }
        &::after {
            border: 4px solid var(--wp--preset--color--bnpp-green);
            content: "";
            inset: 0;
            position: absolute;
            opacity: 0;
            transition: 300ms;
        }
        &:hover::after {
            opacity: 1;
        }
    }
}

.pages-grid {

    gap: var(--wp--preset--spacing--60);

    .post {

        grid-template-columns: 1fr;

        .post-content {
            border: solid 1px var(--wp--preset--color--bnpp-green-tint-30);
            border-left: none!important;
            border-right: none;
            padding: var(--wp--preset--spacing--60);
            position: relative;

            p {
                margin: 0;
                font-size: var(--wp--preset--font-size--small);
                font-weight: 400;
            }

            &::after {
                content: '';
                --arrowSize: 30px;
                position: absolute;
                bottom: var(--wp--preset--spacing--60);
                right: var(--wp--preset--spacing--60);
                width: var(--arrowSize);
                height: var(--arrowSize);
                background-image: url(../images/arrow.svg);
                background-size: contain;
                background-repeat: no-repeat;
                transform: rotate(180deg);
            }

        }
        
    }
}

.fund-grid {

    gap: var(--wp--preset--spacing--60);

    .post {

        grid-template-columns: 1fr;

        .post-content {
            border: solid 1px var(--wp--preset--color--bnpp-green-tint-30);
            padding: var(--wp--preset--spacing--60);
            position: relative;
            flex-direction: row;

            p {
                margin: 0;
                font-size: var(--wp--preset--font-size--small);
                font-weight: 400;
            }

            &::after {
                content: '';
                --arrowSize: 30px;
                bottom: var(--wp--preset--spacing--60);
                right: var(--wp--preset--spacing--60);
                width: var(--arrowSize);
                height: var(--arrowSize);
                background-image: url(../images/arrow.svg);
                background-size: contain;
                background-repeat: no-repeat;
                transform: rotate(180deg);
                align-self: flex-end;
                flex: 1 1 40px;
                transition: 300ms;
            }

        }

        &:hover {
            .post-content::after {
                transform: rotate(180deg) translateX(-5px);
            }
        }
        
    }
}

#load-more-posts {
    margin-top: var(--wp--preset--spacing--40);
    text-transform: uppercase;
}

.archive-posts + .bnpp-container #load-more-posts {
    transform: translateY(calc(var(--wp--preset--spacing--70) / -1));
}

/* Language specfic styles */

/* German */
body:is([data-language="de_DE"], [data-language="fr_FR"]) {

    .posts-grid .post .post-content > p {
        display: none;
    }

    .posts-grid .post .post-content .post-meta .regular-publication {
        font-weight: 400;
    }

}
.minus-grid-template
{
	grid-template-columns: unset!important;
	display:unset!important;
}
.post-thumbnail.mediaroom
{
height:50%;
}
.post-content.mediaroom
{
height:50%;
}
