Custom CSS not working on some pages

Hi, so my client have this website

https://www.hmparchitects.com/architecture

But when we want to copy that, the greyscale thumbnails are not working. In fact, all the new pages that we copy from the original page, the thumbnails are not working

https://www.hmparchitects.com/recently-completed

Can anyone find something missing? thank you

This is our code

 

#mainContent
a:hover {
  text-decoration: underline;
}

#mobile-location {
  display: none;
 }

#page-596ed99d2994cae672489e9a
img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
#page-596ed99d2994cae672489e9a
img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#page-59798f5b914e6b983e314165
img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
#page-59798f5b914e6b983e314165
img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#page-59799c95bf629a07f4d32e4e
img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
#page-59799c95bf629a07f4d32e4e
img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#page-597954c115d5db2591629bae
img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
#page-597954c115d5db2591629bae
img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#page-59ad10a2bebafb5b8683e563
img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
#page-59ad10a2bebafb5b8683e563
img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#page-59af7b6dd55b416b4ae18c85
img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
#page-59af7b6dd55b416b4ae18c85
img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.sqs-block-image .image-caption p { font-size: 16px; }

.collection-type-blog .date {
    font-size: 20px !important;
      letter-spacing: 0.25px;
     font-weight: 400;
    font-style: normal;
    line-height: 1.25em;
}

.collection-type-blog .entry-title {
    font-size: 1.8em !important;
    letter-spacing: 0.5px;
       font-weight: 400;
    font-style: normal;
    line-height: 1.25em;
}

#topNav .main-nav li a span {
    margin-left: 15px !important;
}

#fullscreenBrowser.galleryWrapper .image-description p {
  font-size: 15.2px;
  line-height: 1.55em;
}

@media only screen and (max-width: 3000px){
#fullscreenBrowser.galleryWrapper{
  margin-top: -40px !important;
}}

@media only screen and (max-width: 1000px){
#fullscreenBrowser.galleryWrapper{
  margin-top: 0px !important;
}}

@media only screen and (max-width: 480px){
#fullscreenBrowser.galleryWrapper{
  margin-top: 5px !important;
}}

thank you sir! it worked