Summary Block Image Thumbnail Positioning

Hi there! 

I've used some coding to achieve a list layout, but am having trouble positioning the thumbnail where I need it to be without it changing position vertically when the screen changes size. 

https://violin-halibut-2csa.squarespace.com/list

Anyone able to help with a code to make it stay in place, below the growing line when hovered? 

Thank you 

This is the code I'm playing around with no success: 

//**PROJECT SUMMARY LIST IMAGE APPEAR ON HOVER**/
#block-yui_3_17_2_1_1697462333736_27194 .summary-item:hover img {
    opacity: 1!important;
    transition: opacity 0.4s ease-in-out,!important; 
  visibility: visible!important;
  pointer-events: none!important;
}

#block-yui_3_17_2_1_1697462333736_27194 .summary-item img {
  opacity: 0!important;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out,!important; 
  border: 1px solid #191918;
  pointer-events: none!important;
}

#block-yui_3_17_2_1_1697462333736_27194.summary-thumbnail img {
  visibility: hidden!important;
   pointer-events: none!important;
}

#block-yui_3_17_2_1_1697462333736_27194.summary-thumbnail:hover img {
  visibility: hidden!important;
   pointer-events: none!important;

}

/******IMAGE POSITIONING******/
/* Excerpt styles */

#block-yui_3_17_2_1_1697462333736_27194
.summary-excerpt {
    position: relative;  
}
#block-yui_3_17_2_1_1697462333736_27194
.summary-excerpt p {
  font-size: 0.8rem !important;

}

#block-yui_3_17_2_1_1697462333736_27194 .summary-item {
    display: flex!important;
    align-items: center; /* This aligns children (like your image and title) vertically in the middle */
}

.summary-thumbnail-container {
    position: absolute; /* Or you can remove this if it's not absolutely positioned within .summary-item */
    left: 20px!important; 
  top: 195px;
  
}

Looks like it works on a laptop with Chrome.