Help with accordion text and image

Hello, 

I'm trying to put my text next to my image in desktop screen and under my image when seen in phone screen. I also  struggle with doing my image wider when seen in phone. 

This is my code:

#block-yui_3_17_2_1_1716345216194_308902 {
    
li:nth-child(1) .accordion-item__description:before {
  
    content: "";
  display: block;
    width: 100%; /* image width, you can also use px */
    height: 150px; /* image height */
  width: 150px; /* image height */
  border-radius: 15px;
  
    background-image: url(https://static1.squarespace.com/static/6505228afdd85426284bf7ad/t/66728fe4f00cd419ec25abec/1718783992276/dji_fly_20231105_121652_0012_1699166046586_photo+2+copia.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px; /* space between image-text */
}
 

Thank you!!!

Can you share page url?

or try this under your code

@media screen and (max-width:767px) {
#block-yui_3_17_2_1_1716345216194_308902 li:nth-child(1) .accordion-item__description:before {
width: 100% !important;
height: 250px !important;
}}