How do I change the jetpack related post column

Hello,

I am using the Twenty Twenty theme. I turned on the Related Posts feature. I made it show 6 articles instead of 3. But it is incompatible with mobile.

I tried to set it as two columns, but the css codes I tried did not work. What do you suggest?

The codes below did not work:

1

@media only screen and (max-width: 640px){

div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
clear: right;
}

div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+6) {
clear: right;
}

div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(3) {
clear: left;
}
}

2

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+3), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(2n+3) {
    clear: both !important;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {

    clear: none !important;
}

Thank you