.program {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-block: 24px;
    padding: 12px 18px;
    
    @media (width > 768px) {
        border-radius: 16px;
        margin-block: 48px;
        padding: 32px;
        gap: 32px;
    }

    @media (width <= 768px) {
        margin-inline: -18px;
    }

    .cols {
        display: flex;
        flex-direction: column;
        gap: 24px;
        
        @media (width > 768px) {
            gap: 32px;
            flex-direction: row;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        color: #0D1A22;
        flex: 1;

        p {
            color: currentColor !important;
        }

        h2 {
            color: inherit;
            margin: 0;
        }

        p:last-child {
            margin: 0;
        }

        .button {
            margin-block: 0;
            margin-top: auto !important;

            @media (width <= 768px) {
                display: none;
            }
            
            a, a:focus {
                width: max-content;
                padding: 12px 24px;
                font-size: 1.8rem;
            }
        }
    }

    .details {
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        @media (width > 768px) {
            width: max-content;
            max-width: 350px;
        }

        &.with-infos {

            @media (width > 768px) {
                max-width: 450px;
            }
        }
        
        p {
            display: flex;
            gap: 12px;
            margin: 0;
            font-size: 20px;
            line-height: 130%;
            font-family: 'Roboto';

            @media (width > 768px) {
                font-size: 24px;
            }
            
            span {
                display: grid;
                place-content: center;
                background: #FDFEFF;
                border-radius: 8px;
                width: 32px;
                height: 32px;
                font-size: 24px;
                font-weight: 800;
            }
            
            strong {
                font-weight: 500;
                flex: 1;
            }
        }
        .infos {
            margin-left: 50px;
            margin-top: 8px;

            li {
                font-size: 1.6rem;
            }
        }
    }

    

    > .button {
        margin-block: 0;margin: auto;

        @media (width > 768px) {
            display: none;
        }
        
        a, a:focus {
            width: max-content;
            padding: 12px 24px;
            font-size: 1.8rem;
        }
    }
}