.list-project {
    padding: 50px 0;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h3 {
        font-size: 2.5em;
        font-weight: 700;
        margin-bottom: 20px;
    }

    p {
        font-size: 1.2em;
        margin: 50px;
        color: #5e5e5e;
    }

    .list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 1140px;

        gap: 15px;

        .project {
            position: relative;
            border-radius: 30px;

            min-height: 300px;
            width: 560px;
            max-width: 560px;

            * {
                color: white !important;
                position: inherit;
                z-index: 11;
            }

            .logo {
                width: 200px;
                object-fit: contain;
                border-radius: 5px 5px 0 0;
            }

            .ville {
                color: lightgray;
                font-size: 1em;
                margin: 0 0 25px 0;
            }

            .description {
                display: flex;
                margin-bottom: 20px;
                gap: 15px;

                flex-direction: row;
                align-items: center;
                justify-content: center;

                div {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    flex: 1;
                    gap: 5px;

                    img {
                        width: 50px;
                        object-fit: contain;
                    }

                    p {
                        margin: 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: start;

                        font-size: 1em;

                        span {
                            font-size: 1.2em;
                            font-weight: 700;
                        }
                    }
                }
            }
            &::before {
                content: ' ';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 30px;
                transition: 0.5s;
                background-size: cover;
                object-position: top;
                opacity: 0.3;
            }
        }


    }
}

@media screen and (max-width: 380px) {
    .list-project {
        .list {
            .project {
                .description {
                    flex-direction: column;
                    gap: 50px;
                }
            }
        }
    }
}

@media screen and (max-width: 850px) {
    .list-project {
        width: 100%;
        .list {
            flex-direction: column;
            gap: 30px;

            justify-content: center;
            align-items: center;

            width: 100%;

            .project {
                width: 95%;
            }
        }
    }
}

@media screen and (min-width: 850px) and (max-width: 1140px) {
    .list-project {
        .list {
            width: 100%;
        }
    }
}