Adding code to resize mobile header in portrait

I am trying to add code to change the view of my mobile header to a different portrait gif as desktop is a landscape gif and mobile view

is chopping off the images each side.

I have downloaded the square space ID finder and believe i have the code to add to achieve the outcome but i am unable to actually add the code in the box that appears in ID finder.

this is the code:

<style>

  /* Mobile Screen Size */

  @media(min-width: 768px) {

    [data-section-id='{651a835be915a341f07ef48c"]'] {

      display: none;

    }

  }

  /* Desktop Screen Size */

  @media(max-width: 768px) {

    [data-section-id='{651a835be915a341f07ef48c"]'] {

      display: block;

    }

    [data-section-id='{651a835be915a341f07ef48c"]'] {

      display: none;

    }

  }

</style>

section[data-section-id="651a835be915a341f07ef48c"]

What is your site url?