in the JA Content Module I use layout-04. There is only 1 article here so we have only this article being shown. I have already created custom css code in my template to get the picture size to 60% off the full picture. Only I try to center the picture it still stays left. I want the content to be left so far so good, only the picture will not center. How can I change this?

can you maybe add in the upcoming update the possibility to select the max sizing of the picture and the possibility to choose the alignment of the picture just as for the content

this is the css code i have applied till now

/* ======================================
JA Content Listing Flexible Layouts (Module Class Suffix Based)
====================================== */

/* Global image behavior for all JACL layouts */
.jacl-layout img {
max-width: 100%;
height: auto;
display: block;
object-fit: cover;
}

/* Flex row base fix */
.jacl-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 20px;
}

/* Center layouts using module class suffix */
.one-article-layout .jacl-row,
.two-article-layout .jacl-row,
.three-article-layout .jacl-row {
justify-content: center;
}

/* === ONE ARTICLE FULL WIDTH (Image 60%, Text 40%) === */
.one-article-layout .jacl-col {
flex: 0 0 100%;
max-width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
}

.one-article-layout .jacl-col img {
display: block !important;
margin: 0 auto !important;
width: 60% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
border-radius: 8px !important;
}

.one-article-layout .jacl-col > *:not(img):not(.jacl-rating):not(.jacl-meta) {
flex: 1 1 40%;
max-width: 40%;
}

/* === TWO ARTICLES SIDE BY SIDE === */
.two-article-layout .jacl-col {
flex: 0 0 48%;
max-width: 48%;
}

/* === THREE ARTICLES IN ROW === */
.three-article-layout .jacl-col {
flex: 0 0 30%;
max-width: 30%;
}

/* === Responsive Fallback === */
@media (max-width: 991px) {
.one-article-layout .jacl-col,
.two-article-layout .jacl-col,
.three-article-layout .jacl-col {
flex: 0 0 100%;
max-width: 100%;
}

.one-article-layout .jacl-col {
flex-direction: column;
align-items: center;
}

.one-article-layout .jacl-col > img {
width: 100%;
}
}

/* ============================================================
EXTENDED: Centered Image Variant (use with "centered-image")
============================================================ */

/* Center image inside article and stack content vertically */
.centered-image.one-article-layout .jacl-col {
flex-direction: column;
align-items: center;
text-align: center;
}

.centered-image.one-article-layout .jacl-col img {
display: block !important;
margin: 0 auto !important;
width: 60% !important;
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
border-radius: 8px !important;
}

/* Responsive fallback for centered-image */
@media (max-width: 991px) {
.centered-image.one-article-layout .jacl-col img {
width: 100%;
}
}