<div class="{{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  <div class="quote-info">
    <p>{{ block.settings.quotetext }}</p>
    <img src="{{ block.settings.quoteimage | img_url: 'master' }}" alt="Quote image" width="200">
  </div>
</div>
<style>
  .quote-info {
    display: flex;
    align-items: center;
    gap: 2rem;
    justify-content: space-between; /* Space between text and image */
    flex-direction: row; /* Ensures text is on left, image on right */
  }
  
  .quote-info p {
    flex: 1;
    margin: 0;
    font-size: 15px;
    color: #000;
    letter-spacing: 0;
    line-height: 1.2;
    order: 1; /* Ensures text always comes first in the flow */
  }
  
  .quote-info img {
    max-width: {{block.settings.quoteimagewidth}}px;
    height: auto;
    order: 2; /* Ensures image always comes second in the flow */
  }
  
  @media (max-width: 767px) {
    .quote-info {
      gap: 1rem; /* Smaller gap on mobile */
      flex-wrap: nowrap; /* Prevent wrapping on mobile */
    }

    
    .quote-info img {
      /* Ensure image doesn't grow too large on mobile */
      max-width: min({{block.settings.quoteimagewidth}}px, 40%);
    }
  }
</style>