is any buddy help me in this code for using css

is any buddy help me in this code for using css

ellenparkerly
Visitor
2 0 0

<!-- Trust Badge created and verified by https://www.imcwire.com -->
<div style="width:100%;margin-top:10px;all:unset;">
<style scoped>
.imcwire-logo-container-item {
height: auto;
width: 100%;
position: relative;
padding: 10px 10px;
}

.imcwire-vertical-center {
height: inherit;
display: flex;
align-content: center;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
}

.imcwire-vertical-center img.imcwire-news-logo {
max-width: 100px;
max-height: 66px;
min-width: 50px;
min-height: 14px;
height: auto;
width: auto;
margin: 7px 10px;
overflow: visible;
}

.imcwire-trust-badge,
.imcwire-title,
.imcwire-footer {
font-family: sans-serif !important;
}

.imcwire-title:before,
.imcwire-title:after {
content: "";
flex: 1 1;
border-bottom: 1px solid #d8d8d8;
margin: auto;
width: 27%;
display: block;
position: relative;
}

.imcwire-title:before {
margin-left: 30px;
top: 12px;
}

.imcwire-title:after {
margin-right: 30px;
top: -13px;
}

@media screen and (min-width: 585px) {
.imcwire-logo-container {
padding: 0 20px;
}
}

@media screen and (max-width: 584px) {
.imcwire-news-logo {
max-width: 70px !important;
}

.imcwire-title {
font-size: 15px;
top: -5px;
letter-spacing: 6px;
}

.imcwire-title:before,
.imcwire-title:after {
border-bottom: none !important;
}

.imcwire-leaf {
display: none !important;
}
}

@media screen and (max-width: 340px) {
.imcwire-title-hr {
display: none !important;
}

.imcwire-title {
font-size: 14px;
padding: 0 !important;
}

.imcwire-footer {
font-size: 11px !important;
margin: 20px 0 25px 0 !important;
letter-spacing: 2px !important;
}

.imcwire-news-logo {
max-width: 50px !important;
}
}

.imcwire-logo-container {
text-align: center;
margin: 0 auto 0 auto;
display: flex;
align-content: center;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}

.imcwire-newslogos {
display: inline-block;
position: relative;
}
</style>
<div id="imcwire-trust-badge"
style="position: relative;width:100%;background:#ffffff;border-radius:10px;min-height:180px;margin-left: auto;margin-right: auto;padding-bottom:12px;">
<div
style="text-align:center;padding:0px 5px 10px 5px;font-size: 18px;font-family: sans-serif;font-weight: 600;letter-spacing: 8px;line-height: 1.3;">
<div style="height: 58px;">
<span class="imcwire-title" style="z-index: 1; position: relative; padding: 0 20px;margin:0;color:#0e0e0e;">AS SEEN ON</span>
</div>
<div class="imcwire-logo-container">
<div class="imcwire-logo-container-item">
<div class="imcwire-vertical-center">
<a href="https://www.bloomberg.com" target="_Blank" class="imcwire-newslogos">
<img alt="Featured on Bloomberg" class="imcwire-news-logo" src="https://via.placeholder.com/100x66?text=Bloomberg">
</a>
<a href="https://www.marketwatch.com" target="_Blank" class="imcwire-newslogos">
<img alt="Featured on MarketWatch" class="imcwire-news-logo" src="https://via.placeholder.com/100x66?text=MarketWatch">
</a>
<a href="https://www.yahoo.com/news" target="_Blank" class="imcwire-newslogos">
<img alt="Featured on Yahoo News" class="imcwire-news-logo" src="https://via.placeholder.com/100x66?text=Yahoo+News">
</a>
<a href="https://www.digitaljournal.com" target="_Blank" class="imcwire-newslogos">
<img alt="Featured on Digital Journal" class="imcwire-news-logo" src="https://via.placeholder.com/100x66?text=Digital+Journal">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of IMCWire Trust Badge -->

Premier Press Release Distribution Service
Reply 1 (1)

EcomGraduates
Shopify Partner
840 71 121

try this  in the custom liquid  and  html  section  

<div class="instagram-feed">
  <div class="instagram-post">
    <blockquote
      class="instagram-media"
      data-instgrm-permalink="https://www.instagram.com/p/POST_ID/"
      data-instgrm-version="14"
    ></blockquote>
  </div>
  <div class="instagram-post">
    <blockquote
      class="instagram-media"
      data-instgrm-permalink="https://www.instagram.com/p/ANOTHER_POST_ID/"
      data-instgrm-version="14"
    ></blockquote>
  </div>
  <div class="instagram-post">
    <blockquote
      class="instagram-media"
      data-instgrm-permalink="https://www.instagram.com/p/YET_ANOTHER_POST_ID/"
      data-instgrm-version="14"
    ></blockquote>
  </div>
</div>

<script async src="//www.instagram.com/embed.js"></script>

<style>
  /* Container for the Instagram Feed */
  .instagram-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: 20px; /* Space between posts */
    max-width: 1200px; /* Restrict max width */
    margin: 0 auto; /* Center the feed */
    padding: 20px;
  }

  /* Individual Instagram Post */
  .instagram-post {
    position: relative;
    min-width: 200px;
    aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
    overflow: hidden;
    background-color: #f9f9f9; /* Fallback background color */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hover effect for better interactivity */
  .instagram-post:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    transition: transform 0.3s ease;
  }

  /* Responsive Design */
  @media screen and (max-width: 1024px) {
    .instagram-feed {
      grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
  }

  @media screen and (max-width: 768px) {
    .instagram-feed {
      grid-template-columns: 1fr; /* 1 column on small screens */
    }
  }
</style>

 If this fixed your issue, likes and accepting as a solution are highly appreciated
|  Build an online presence with our custom-built Shopify Theme: EcomifyTheme
|  Check out our reviews: Trustpilot Reviews
|  We are Shopify Partners: EcomGraduates Shopify Partner