.hero {

    position: relative;
    background: var(--background);
    color: var(--wp--preset--color--white);
    padding: var(--wp--preset--spacing--70) 0;

    &.with-background {
        background-position: bottom right;
        background-size: contain;
        background-repeat: no-repeat;

        .hero-content {

            position: relative;
            z-index: 2;

            * {
                color: var(--wp--preset--color--white);
            }

        }

    }

    nav.breadcrumbs {

        margin-bottom: var(--wp--preset--spacing--80);
        
        ul {
            display: flex;
            align-items: center;
            padding: 0;
            margin: 0;
            list-style: none;
            font-weight: 300;
            flex-wrap: wrap;

            li {

                font-weight: 400;
                font-size: calc(var(--wp--preset--font-size--body) - 2px);

                &:not(:last-child)::after {
                    content: ">";
                    margin: 0 var(--wp--preset--spacing--30);
                    font-family: var(--wp--preset--font-family--bnpp-sans-condensed);
                }

                a {
                    color: var(--wp--preset--color--white);
                    opacity: 0.9;
                    font-weight: 300;
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }

            }
        }
    }

    .hero-content {
        display: grid;
        grid-template-columns: 75% 1fr;
        gap: var(--wp--preset--spacing--40);

        @media only screen and (max-width: 768px) {
            grid-template-columns: 100%;
        }

        .bnpp-pill {
            display: inline-block;
            background: var(--wp--preset--color--bnpp-green-tint-30);
            border-radius: 50px;
            padding: 0.2rem var(--wp--preset--spacing--40);
            margin-bottom: var(--wp--preset--spacing--60);
            font-weight: 300;
        }

        h1 {
            font-weight: 400;
        }


        .case-study-info {
            display: flex;
            gap: var(--wp--preset--spacing--40);

            & > div {
                padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
                background: var(--wp--preset--color--bnpp-green-tint-30);
                border: solid 1px var(--wp--preset--color--bnpp-green);
                padding: 0 var(--wp--preset--spacing--20);
				font-size: var(--wp--preset--font-size--body-s);
                font-weight: 400;
                display: flex;
                gap: var(--wp--preset--spacing--20);
                align-items: center;

                .asset-icon {
                    width: 35px;
                    display: grid;

                    svg :is(*[style*="1d1d1b"], *[style*="rgb(29, 29, 27)"]) {
                        stroke: var(--wp--preset--color--white)!important;
                    }
                }

                img {
                    width: 35px;
                }
            }
        }

    }

}