HTML training material with inline CSS

Can someone help me with inline CSS?

Most of the style tags just get deleted once I save the HTML training material and I’m a little desperate already. We are offering some pictures to download on our LMS through HTML pages. We show the pictures with a hover effect. When you click on the picture it opens in a new tab where you can download it. On the browser everything is working fine, since I can use custom CSS. However, this custom CSS is not working on the Go.Learn App (only the design).

This is how it looks on my browser:

This is how it looks on the App:

So my problem is that I tried to use some inline CSS to make them look a bit better on the smartphone app (I don’t need any of the effects). But all inline codes were deleted (style=”display:inline-flex;” and the like). Every picture is showing in one column instead of using the whole space (for example if 3 pictures fit in the first line show 3 pictures in each line etc.). Can anyone help me out with this?

This is an example of the html code I’m using on the training material (please be aware that I got many of these pages and I need to do this several pictures/links):

<div class="enjo-gallery">
    <div>
        <a href="link1" target="_blank" rel="noreferrer" download>
        <img src="link1" alt="Image1" width="300" /></a>
    </div>
   <div>
        <a href="link2" target="_blank" rel="noreferrer" download>
        <img src="link2" alt="Image2" width="300" /></a>
    </div>
    <div>
        <a href="link3" target="_blank" rel="noreferrer" download>
        <img src="link3" alt="Image3" width="300" /></a>
    </div>
</div>

This is the custom CSS:

.enjo-gallery {
    display: inline-flex;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    grid-gap: 10px;
    justify-content: center;
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.enjo-gallery img {
        max-width: 300px;
        height: auto;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform .2s;
}

.enjo-gallery img:hover {
        transform: scale(1.1);
}

.enjo-gallery div {
        text-align: center;
}

@media screen and (max-width: 767px) {
    .enjo-gallery img{
           max-width:  150px;
     }
}

I really would appreciate the help!!