Picture Visible on Mobile but not Desktop?

[kingbeanz]

Hi,
I have this review image able to be viewed on mobile:

But not on desktop:

Can someone please help me display it correctly on desktop?

It’s a liquid code I’m using:

<div class="countdown__content" style="padding-top: 30px; padding-bottom: 0px;">
  <!-- Additional Element Above Countdown -->
  <div class="sc-furwcr dAWGlU pf-21_ pf-r pf-r-eh" style="--s-xs:15px;--s-lg:0px; padding-bottom: 1px; padding-top: 10px; display: flex; align-items: center; justify-content: center;" data-pf-type="Row">
    <div class="pf-c" style="--c-xs:12;--c-md:12;--c-lg:12">
      <div data-pf-type="Column" class="sc-fHeRUh cCunWv pf-22_">
        <div data-pf-type="Block" class="sc-gIDmLj ieLWJW pf-23_" style="display: flex; align-items: center; justify-content: center;">
          <img src="https://web.archive.org/web/20240421214530im_/https://cdn.shopify.com/s/files/1/0445/7765/2887/t/10/assets/screenshot-20230309-at-112658-1678357634443_100x.png?v=1678357636" 
               srcset="https://web.archive.org/web/20240421214530im_/https://cdn.shopify.com/s/files/1/0445/7765/2887/t/10/assets/screenshot-20230309-at-112658-1678357634443.png?v=1678357636 1536w" 
               width="100" height="49" 
               style="margin-right: 10px; vertical-align: middle; height: auto; max-height: 30px; width: auto;" 
               class="sc-fbyfCU cCdixN pf-24_">
          <p class="sc-hOGkXu hVdrsp pf-25_" tabindex="0" spellcheck="false" data-pf-type="Paragraph3" style="margin: 0; line-height: 18px; font-size: 13px;">
            <font color="#f64747"><span style="color: rgb(0, 0, 0);">Trusted by 1382+ Happy Customers</span></font>
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile-Only Section -->
  <div class="countdown__block countdown__block--content mobile-only">
    <div class="countdown__text-wrapper countdown__text-wrapper--content-alignment-center">
      <div class="countdown__heading">
        <h2 class="h2 universal-heading" data-live-text-setting="section.template--23430322913555__countdown_8WADPd.block.content_CaVYhr.heading">WAREHOUSE CLEARANCE</h2>
      </div>
    </div>
  </div>

  <!-- Desktop-Only Section -->
  <div class="countdown__block countdown__block--content desktop-only">
    <div class="countdown__text-wrapper countdown__text-wrapper--content-alignment-center">
      <div class="countdown__heading">
        <h2 class="h2 universal-heading" data-live-text-setting="section.template--23430322913555__countdown_8WADPd.block.content_CaVYhr.heading">WAREHOUSE CLEARANCE</h2>
      </div>
      <div class="countdown__richtext" data-live-text-setting="section.template--23430322913555__countdown_8WADPd.block.content_CaVYhr.text">
        <p>– UP TO 80% OFF –</p>
      </div>
    </div>
  </div>

  <div class="countdown__block countdown__block--timer desktop-only">
    <div id="countdown-timer" class="countdown__display countdown__display--visible">
      <div class="countdown__display-block">
        <h2 id="hours">0</h2>
        <span>HOURS</span>
      </div>
      <div class="countdown__display-block">
        <h2 id="minutes">0</h2>
        <span>MINUTES</span>
      </div>
      <div class="countdown__display-block">
        <h2 id="seconds">0</h2>
        <span>SECONDS</span>
      </div>
    </div>
  </div>
</div>

<style>
  .countdown__display-block {
    text-align: center;
    font-size: 24px; /* Adjust font size as needed */
  }

  .countdown__display-block h2 {
    margin: 0;
    padding: 0;
  }

  .countdown__display-block span {
    display: block;
    font-size: 14px; /* Adjust font size for labels */
  }

  .sc-furwcr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px; /* Adjust as needed */
  }

  .sc-gIDmLj {
    display: flex;
    align-items: center;
    justify-content: center; /* Center items horizontally */
  }

  .sc-gIDmLj img {
    height: auto; /* Maintain aspect ratio */
    max-height: 49px; /* Ensure the image height matches its defined height */
    width: auto;
    margin-right: 10px; /* Adjust margin to decrease space between image and text */
  }

  .sc-hOGkXu {
    margin: 0;
    line-height: 18px; /* Match line height with image height for vertical alignment */
    font-size: 12px; /* Adjusted font size for the text */
  }

  .universal-heading {
    font-size: 35px; /* Universal font size for "WAREHOUSE CLEARANCE" */
  }

  /* Responsive styling for mobile devices */
  @media (max-width: 767px) {
    .desktop-only {
      display: none; /* Hide elements on mobile */
    }
  }

  /* Hide elements on mobile and show on desktop */
  @media (min-width: 768px) {
    .mobile-only {
      display: none; /* Hide elements on desktop */
    }
  }
</style>

<script>
  // Set the countdown duration (4 hours and 32 minutes in milliseconds)
  const countdownDuration = (4 * 60 * 60 * 1000) + (32 * 60 * 1000);
  
  // Calculate end time
  const endTime = Date.now() + countdownDuration;

  function updateCountdown() {
    const now = Date.now();
    const remainingTime = endTime - now;

    if (remainingTime <= 0) {
      document.getElementById('hours').textContent = '0';
      document.getElementById('minutes').textContent = '0';
      document.getElementById('seconds').textContent = '0';
      return;
    }

    const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

    document.getElementById('hours').textContent = hours;
    document.getElementById('minutes').textContent = minutes;
    document.getElementById('seconds').textContent = seconds;
  }

  // Update countdown every second
  setInterval(updateCountdown, 1000);

  // Initial call to populate the timer immediately
  updateCountdown();
</script>

Thanks!