Html – I want the photo to slide down when hovered over

when there are more ‘gy-section’, when you hover over them, only the first photo moves and the rest do not want to work

I tried changing classes, adding other classes, converting them to id, changing the JS code but nothing works.

HTML

<div class="container">
        <div class="gallery">
            <div class="gy-section">
                <div class="gy-sec-img"></div>
            </div>
        </div>
    </div>

JavaScript

let gyHover = this.document.querySelector(".gy-section");
let gySection = this.document.querySelector(".gy-sec-img");
let gyText = this.document.querySelector(".gy-simg-title");

let value = '';

gyHover.addEventListener('mouseenter', async function up() {
  value = gySection.backgroundPositionY;

  gySection.animate([
        // key frames
        { backgroundPositionY: {value} },
        { backgroundPositionY: '100%'}
      ], {
        duration: 4000,
        easing: 'ease-in-out',
        iterations: 1,
    });

    gyHover.classList.add('gys-hover');
    gySection.classList.add('gys-hover');
    gyText.classList.add('gst-hover');
    await new Promise(resolve => setTimeout(resolve, 3999)); // 3 sec
    gySection.style.backgroundPositionY = "100%";
});

gyHover.addEventListener('mouseleave', async function down() {
  value = gySection.backgroundPositionY;

  gySection.animate([
        // key frames
        { backgroundPositionY: {value} },
        { backgroundPositionY: '0%'}
      ], {
        duration: 4000,
        easing: 'ease-in-out',
        iterations: 1,
    });

    gyHover.classList.remove('gys-hover');
    gySection.classList.remove('gys-hover');
    gyText.classList.remove('gst-hover');
    await new Promise(resolve => setTimeout(resolve, 3999)); // 3 sec
    gySection.style.backgroundPositionY = "0%";
});