V2 - heading + logos

var eg_logos = `
<div class="eg-container"> 
<h2>Trusted By Companies Worldwide For Over 35 Years</h2>
    <div class="eg_logos__group">
    
        
    <div class="eg_logos__item">
                <img
                  src="https://www.altium.com/sites/default/files/media_icon/2022-01/ArduinoLogo_%C2%AE.svg"
                  alt="Arduino logo"
                />
    </div>

    <div class="eg_logos__item">
        <img
          src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/bae_color.svg"
          alt="BAE"
        />
      </div>

      <div class="eg_logos__item">
        <img
          src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/leicamicrosystems_color.svg"
          alt="Leica"
        />
      </div>
     
      <div class="eg_logos__item">
        <img
          src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/microsoft_color.svg"
          alt="Microsoft"
        />
      </div>

      <div class="eg_logos__item">
        <img
          src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/lyft_color.svg"
          alt="Lyft"/>
      </div>

      <div class="eg_logos__item">
        <img
          src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/amazon_color.svg"
          alt="Amazon"
        />
      </div>
      
      <div class="eg_logos__item">
        <img
          src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/facebook_color.svg"
          alt="Facebook"
        />
      </div>

      <div class="eg_logos__item">
        <img
          src="//cdn-static.altium.com/sites/default/files/media_icon/2021-07/dell_color.svg"
          alt="Dell"
        />
      </div>
    </div>
</div `

document.querySelector(" div  article > div > section.s-row-list > div.s-row-list__header > div").insertAdjacentHTML("beforebegin", eg_logos)










.eg-container{
  position: relative;
  margin-right: auto;
  width: 100%;
  padding-block: 30px;
}

div.eg-container > h2 {
 font-size: 1.4vw;
}

.eg_logos__group{
  display: flex;
  flex-wrap: wrap !important;
  align-items: center;
justify-content: center;
 }

.eg_logos__item{
max-width: 150px;
    flex: 1 0 100px;
}

.eg_logos__item img {
display: block;
margin: 0 auto;
filter: grayscale(100%);
opacity: 0.6;
width: 80px;
transition: filter .3s,opacity .3s;
}


.eg_logos__item img:hover {
filter: grayscale(0);
opacity: 1;
 cursor: pointer;
}




@media screen and (max-width: 768px) {
  .eg-container{
    margin-right: auto;
    margin-left: auto;
        width: 90%;
    padding-block: 35px;
  }
  
  .eg_logos__group{
    justify-content: center;
  }
  
  .eg_logos__item{
  padding: 12px;
  }
    .eg_logos__item{
max-width: 100px;
    flex: 1 0 80px;
}
  div.eg-container > h2 {
 font-size: 4.2vw;
  padding-bottom: 10px;
}

}

@media (min-width: 815px) and (max-width: 1025px){
  .eg-container {
      position: relative;
      margin-right: auto;
      width: 100%;
      padding-block: 30px;
  }
 div.eg-container > h2 {
 font-size: 2.5vw;
  padding-bottom: 10px;
}
.eg_logos__item{
max-width: 150px;
    flex: 1 0 200px;
}

 }