#14 - Additional CSS to make image responsive for mobile

Site URL: https://www.reyabarreyoga.com/faqs

Is there additional CSS that I can add to #14 that will make the image resize when viewing on a mobile device? See screenshot of current view of mobile vs desktop using the provided code.  Thank you!

/* Add an image into Accordion Content *//* replace demo image with your image url */
/* nth-child(1) is first accordion item, nth-child(2) is second item... */
/* :before is image on top, :after if image on bottom */
li:nth-child(3) .accordion-item__description:after {
    content: "";
    display: block;
    width: 100%; /* image width, you can also use px */
    height: 315px; /* image height */
    background-image: url(https://images.squarespace-cdn.com/content/v1/5f32fd0a60773f56ba2eb568/5a51b94b-7454-4222-802c-7819ebcaf80b/parkingmap.jpg?format=500w);
    background-repeat: no-repeat;
    margin-bottom: 20px;
 /* space between image-text */
}

I think I've resolved this issue, in case anyone else comes across this and is wondering ...

I inserted more CSS to target a new image when viewing on mobile only using the following code.

/* CSS FOR MOBILE */
@mobile: ~"only screen and (max-width: 640px)";

/* CSS FOR MOBILE */

@media @mobile {
/* Insert Code for Mobile Below This Line*/
 li:nth-child(3) .accordion-item__description:after {
   width: 100%;
  margin: 0 auto;
    background-image: url(https://images.squarespace-cdn.com/content/v1/5f32fd0a60773f56ba2eb568/692c7b5a-d48a-4818-b057-4a10f5825741/parkingmap-mobile.png?format=300w);
  }
/* Insert Code for Mobile Above This Line */
}