Untitled

var eg_logos = `
<div class="eg-container"> 
    <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("body article > section > div.l-container > div.s-hero__in > div.s-hero__btn-wrap").insertAdjacentHTML("afterend", eg_logos)





.eg-container{
    position: relative;
    margin-right: auto;
    margin-left: -8% !important;
    width: 80%;
       padding-top: 10px;
  }
  
  .eg_logos__group{
    display: flex;
    flex-wrap: wrap !important;
    align-items: center;
  justify-content: center;
   }
  
  .eg_logos__item{
  max-width: 100px;
      flex: 1 0 100px;
  }
  
  .eg_logos__item img {
  display: block;
  margin: 0 auto;
  filter: grayscale(100%);
  opacity: 0.6;
  width: 70px;
  transition: filter .3s,opacity .3s;
  }
  
  
  .eg_logos__item img:hover {
  filter: grayscale(0);
  opacity: 1;
   cursor: pointer;
  }
  
  @media screen and (max-width: 767px) {
    .eg-container{
      margin-right: auto;
      margin-left: auto !important;
          width: 100%;
      padding-block: 35px;
    }
    
    .eg_logos__group{
      justify-content: center !important;
    }
    
    .eg_logos__item{
    padding: 8px;
    }
      .eg_logos__item{
  max-width: 100px;
      flex: 1 0 90px;
  }
  
  }
  
  @media (min-width: 768px) and (max-width: 824px){
    .eg-container {
        position: relative;
        margin-right: auto;
        width: 55%;
        padding-block: 30px;
    }
  
  .eg_logos__item{
  max-width: 69px;
      flex: 1 0 100px;
  }
  .eg_logos__item img {
  display: block;
  margin: 0 auto;
  width: 55px;
   padding: 2px;
   }  
  
  }
  
  
  @media (min-width: 825px) and (max-width: 1025px){
    .eg-container {
        position: relative;
        margin-right: auto;
        width: 58%;
        padding-block: 30px;
    }
  
  .eg_logos__item{
  max-width: 80px;
       flex: 1 0 100px;
    }
      
  .eg_logos__item img {
  display: block;
  margin: 0 auto;
  width: 60px;
   }  
  
  }