What does this injected code mean?

Hi- So my individual portfolio pages started acting weird in mobile view (see attached screenshot).

I did add some very simple custom CSS and a script to my site via the Custom CSS (Design>Custom CSS) and Code Injection (Setting>Advanced>Code Injection), but while I was troubleshooting, removing all those things did not fix my situation seen in the photo.

I was advised by squarespace to go further and delete the code found below from each of my individual portfolio pages page header code Injection panel. This has seemed to resolve my issue. 

Could someone smarter than I describe what this code below is meant to do? I'm just nervous I'm creating other issues by deleting this code. Also,  I swear I did not insert that code into the page header code injection panel for each of these pages-- do you think it was automatically generated via some of my other code/scripts? 

Thanks!

.gallery-slideshow-item img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.gallery-slideshow {
    width: 50%;
    float: left;
    padding: 0;
    padding-left: 3vw;
    margin-bottom: 30px;
    height: auto !important;
}
.gallery-slideshow-controls {
    top: 55% !important;
}
@media screen and (max-width: 768px) {
 .gallery-slideshow {
      width: 100%;
     padding-left: 6vw;
     padding-right: 6vw;
  }
}

Hi. To add code to Code Injection or Page Header, you need to wrap CSS in style tag

<style>
  .gallery-slideshow-item img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
.gallery-slideshow {
    width: 50%;
    float: left;
    padding: 0;
    padding-left: 3vw;
    margin-bottom: 30px;
    height: auto !important;
}
.gallery-slideshow-controls {
    top: 55% !important;
}
@media screen and (max-width: 768px) {
 .gallery-slideshow {
      width: 100%;
     padding-left: 6vw;
     padding-right: 6vw;
  }
}
</style>