USP

<section class="promotion-banner">
  <div class="promotion-container">
    <ul class="promotion-list">
      <!-- All items with image above text -->
      <li class="image-above">
        <img class="icon" src="https://cdn.shopify.com/s/files/1/0912/3312/4632/files/i1_1.png?v=1737021835" alt="4 samples with every order free"> 
        <strong>4 samples with <br> every order free</strong>
      </li>
      <li class="image-above">
        <img class="icon" src="https://cdn.shopify.com/s/files/1/0912/3312/4632/files/i2.png?v=1737020614" alt="Long-lasting"> 
        <strong>Long-lasting</strong>
      </li>
      <li class="image-above">
        <img class="icon" src="https://cdn.shopify.com/s/files/1/0912/3312/4632/files/i3.png?v=1737020614" alt="Luxury"> 
        <strong>Luxury</strong>
      </li>
      <li class="image-above">
        <img class="icon" src="https://cdn.shopify.com/s/files/1/0912/3312/4632/files/i4.png?v=1737020613" alt="All season"> 
        <strong>All season</strong>
      </li>
    </ul>
  </div>
</section>

<style>
  /* Custom CSS for the Promotion Banner */
  .promotion-banner {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
  }

  .promotion-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .promotion-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex; /* Flexbox for row layout */
    justify-content: space-between; /* Space between items */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    gap: 15px; /* Add spacing between items */
  }

  /* Default layout for items */
  .promotion-list li {
    font-size: 16px;
    color: #333; /* Dark text color */
    display: flex; /* Align image and text side by side */
    align-items: center; /* Vertically align text with image */
    flex: 1 1 20%; /* Adjust item width */
    min-width: 200px; /* Prevent items from getting too narrow */
    text-align: center; /* Center text for consistency */
  }

  /* Image above text layout for all items */
  .image-above {
    display: flex; /* Flexbox for column layout */
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center align image and text */
  }

  .image-above img.icon {
    margin-bottom: 10px; /* Add space below image */
  }

  /* Specific styling for image icons */
  .promotion-list img.icon {
    width: 70px; /* Adjust image size */
    height: 70px; /* Keep proportions */
  }
</style>