New Auto List Section & Section Background Change Image on Hover

Site URL: https://mauve-decagon-kl9a.squarespace.com/

Hi,

Hoping someone can help, my question has 2 parts.

https://mauve-decagon-kl9a.squarespace.com/
website password: testimagehover

1. Change image on hover in a new auto list section.

I have partially worked out how to do this using the below code:

section[data-section-id="60dc62f6ab61a53e6b1da0e6"] .list-item-media-inner {
  background-image: url(https://static1.squarespace.com/static/60d2fc7affbb93528c06a195/t/60dae15f28866c62c97e7113/1624957279616/SnailVibe_Website_Logo_home_white.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
section[data-section-id="60dc62f6ab61a53e6b1da0e6"] .list-item-media-inner img {
  transition: opacity .2s linear;
}
section[data-section-id="60dc62f6ab61a53e6b1da0e6"] .list-item-media-inner:hover img {
  opacity: 0;
}

But I would like to give each list item a different image on hover is this possible?

2. Change section background image on hover.

I have seen lots of guides on how to change image blocks but is it possible to change a section background image to a different image on hover?

Thanks in advance for the help I wouldn't have gotten this far without the aid of all the great free advice given on this forum.

Q1. Edit this code

section[data-section-id="60dc62f6ab61a53e6b1da0e6"] .list-item-media-inner {
  background-image: url(https://static1.squarespace.com/static/60d2fc7affbb93528c06a195/t/60dae15f28866c62c97e7113/1624957279616/SnailVibe_Website_Logo_home_white.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

to this

section[data-section-id="60dc62f6ab61a53e6b1da0e6"] .list-item-media-inner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

and add this code

section[data-section-id="60dc62f6ab61a53e6b1da0e6"] {
li.list-item:nth-child(1) .list-item-media-inner {
   background-image: url(https://static1.squarespace.com/static/60d2fc7affbb93528c06a195/t/60dae15f28866c62c97e7113/1624957279616/SnailVibe_Website_Logo_home_white.png);
}
li.list-item:nth-child(2) .list-item-media-inner {
   background-image: url(https://cdn.pixabay.com/photo/2021/02/24/23/43/boy-6047786__340.jpg);
}
li.list-item:nth-child(3) .list-item-media-inner {
   background-image: url(https://cdn.pixabay.com/photo/2021/01/20/21/32/prague-5935651__340.jpg);
}
}

Q2. Use this CSS (this code for section under Auto list)

[data-section-id="60dc656adc7f6c4bf8248ddb"]:hover .section-background {
    background-image: url(https://cdn.pixabay.com/photo/2020/05/30/07/15/mountains-5237939__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
[data-section-id="60dc656adc7f6c4bf8248ddb"]:hover .section-background img {
    visibility: hidden;
}