.CMS-vignette-conseil {
    overflow: hidden;
    border-radius: 6px;
    .CMS-vignette-hover {
        height: 428px;
        display: flex;
        color: white;
        overflow: hidden;

        .background-image-wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            transition: 1.5s;
            width: 100%;
            z-index: 1;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        h2 {
            text-align: center;
            font: normal normal 600 28px/33px Karla;
            color: #FFFFFF;
            text-shadow: 0 3px 6px #0000007A;
            margin-bottom: 23px;
        }

        .CMS-vignette-Container {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            justify-content: flex-end;
            align-items: center;
            padding: 0 15px;
            z-index: 2;
            background: linear-gradient(180deg, #10101000, #10101000, #10101078);
        }

        .card-hover-container {
            padding: 0 13px 29px 13px;
            text-align: center;
            transition: opacity linear 0.5s, max-height linear 0.4s;

            .Text-description {
                height: 0;
                visibility: hidden;
                margin: 0;
            }
        }
        .btn {
            border-radius: 4px;
            padding: 13px 34px;
            font: normal normal bold 12px/14px Karla;
            letter-spacing: 0px;

            &:hover {
                background-color: #183157;
                color: white;
                border-color: #183157;
            }
        }

        @media (min-width: 1024px) and (pointer: fine) {
            h2 {
                margin-bottom: 7px;
            }
            .card-hover-container {
                opacity: 0;
                max-height: 0;

                .Text-description {
                    height: unset;
                    visibility: visible;
                    margin-bottom: 23px;
                }
            }
            &:hover {
                .CMS-vignette-Container {
                    background: linear-gradient(180deg,#10101000, #10101099,#101010AB);
                }
                .card-hover-container {
                    opacity: 1;
                    visibility: visible;
                    max-height: 400px;
                }
                .background-image-wrapper {
                    transform: scale(1.2);
                }
            }
        }
    }
}