.text-img-50 {
    margin-block: 24px;

    &.with-bg-color {
        padding: 16px;
        border-radius: 8px;
        
        @media (width > 800px) {
            padding: 32px;
            border-radius: 16px;

        }
    }

    &.mb0 {
        margin-bottom: 0;
    }

    &:last-child {
        margin-bottom: 0 !important;
    }

    &.formation-color {
        background: var(--_bg-color);
    }

    &.custom-color {
        background: var(--_custom-color);
    }

    @media (width > 800px) {
        margin-block: 48px;
    }

    h2, h3 {
        color: var(--_bg-color, #0070b8);
    }

    h2 {
        margin-bottom: 24px;
    }

    .title-text {

        h3 {
            color: #0D1A22;

            @media (width > 800px) {
                font-size: 2.4rem !important;
            }
        }
    }

    .cols {
        display: flex;
        flex-direction: column;
        gap: 12px;

        @media (width > 800px) {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 48px;
            
            &.reverse {
                flex-direction: row-reverse;
            }
        }

        @media (width < 800px) {
            &.reverse-mobile {
                flex-direction: column-reverse;
            }
        }

        &.taille-reduite {

            .media {
                flex: 1;

                @media (width > 800px) {
                    width: 41% !important;
                    flex: none;
                }

                @media (width <= 800px ) {

                    &.mobile-hidden {
                        display: none;
                    }
                }
            }
        }

        &.align-top {
            align-items: flex-start;
        }
    }

    .content {
        flex: 1;

        p, ul, li {
            margin-bottom: 12px;

            a {
                color: #0070b8;
                border-bottom: 1px solid #0070b8;
                text-decoration: none;
                

                &:hover {
                    color: #0070B8;
                    border-bottom: 2px solid #0070B8;
                }
                 &:focus {
                    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #0D1A22;
                }

                &.wp-block-button__link {
                    color: #fff; border-bottom: 2px solid #0070b8;
                }
            }
        }

        & p:last-child, & ul:last-child, & li:last-child {
            margin-bottom: 0;
        }

        > h3:first-child {
            margin-top: 0;
        }

        .button {

            @media (width <= 800px) {
                text-align: center;
            }

            a {
                width: max-content;

                &:focus {
                    padding: 12px 24px;
                }
            }
        }

        h3 {
            font-size: 2rem;

            @media (width > 800px) {
                font-size: 3.2rem;
            }
        }
    }

    .media {
        flex: 1;
        align-self: stretch;

        &.is-video {
            display: flex;
            align-items: center;

            @media (width > 800px) {
                max-height: 296px;
            }
        }

        &.mobile-hidden {

            @media (width <= 800px) {
                display: none;
            }
        }
    }

    .photo {
        height: 200px;
        margin-bottom: 0;

        @media (width > 800px) {
            height: 100%;
        }

        img {
            border-radius: 16px;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &.is-multiple {
            display: flex;
            flex-direction: column;
            gap: 24px;
            
            @media (width <= 800px) {
                height: auto;
            }

            @media (width > 800px) {
                /* On fait en sorte que les 2 photos prennent toute la hauteur du bloc */
                justify-content: stretch;

                picture, img {
                    flex: 1;
                }
            }
        }
    }

    .video {
        width: 100%;

        iframe {
            border-radius: 16px;
        }
    }

    &.mini-photo {

        .media {

            .photo {

                @media (width <=800px) {
                    height: 230px;
                }
            }
        }
    }
}