Image Marquee Gallery

<div class="marquee-gallery bg-gray-100">
  <style>@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap'); .marquee-container{position:relative;width:100%;height:100vh;min-height:800px;max-height:1200px;overflow:hidden;background:#E0DFDF} @media(max-width:767px){.marquee-container{height:70vh;min-height:500px;max-height:700px}} .animation-clip{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:2500px;height:100%;overflow:hidden;pointer-events:none} .image-item{position:absolute;width:16vw;aspect-ratio:1/2;border-radius:32px;box-shadow:0 4px 15px rgba(0,0,0,0.3);opacity:1;transition:transform 0.1s ease;object-fit:cover} .image-item img{display:block;width:100%;height:100%;object-fit:cover;border-radius:32px} @media(max-width:767px){.image-item{width:32.5vw;border-radius:24px} .image-item img{border-radius:24px}} .device-frame{position:absolute;border-radius:2.5vw;aspect-ratio:1/2;width:16.5vw;z-index:10;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);top:50%;left:50%} @media(max-width:767px){.device-frame{width:33.5vw}} .device-screen{width:100%;height:100%;border-radius:inherit} .device-screen img{width:100%;height:100%;object-fit:cover;border-radius:inherit} .left-cloud,.right-cloud{position:absolute;top:0;width:15%;height:100%;filter:blur(5px);z-index:100} .left-cloud{left:0;background:linear-gradient(to right,#E0DFDF 0%,#E0DFDF 5%,transparent 100%)} .right-cloud{right:0;background:linear-gradient(to left,#E0DFDF 0%,#E0DFDF 5%,transparent 100%)}</style>
  <div class="marquee-container relative">
    <div class="left-cloud"></div>
    <div class="right-cloud"></div>
    <div class="animation-clip">
      <div class="device-frame">
        <div class="device-screen">
          <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/iframe.png" alt="App Screen" />
        </div>
      </div>
      <div class="image-item" style="left:20%;top:30%">
        <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/2-576x1024.webp" alt="Gallery Image 1" />
      </div>
      <div class="image-item" style="left:80%;top:40%">
        <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/1-576x1024.webp" alt="Gallery Image 2" />
      </div>
      <div class="image-item" style="left:15%;top:70%">
        <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/4-576x1024.webp" alt="Gallery Image 3" />
      </div>
      <div class="image-item" style="left:85%;top:25%">
        <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/6-576x1024.webp" alt="Gallery Image 4" />
      </div>
      <div class="image-item" style="left:25%;top:20%">
        <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/3-576x1024.webp" alt="Gallery Image 5" />
      </div>
      <div class="image-item" style="left:75%;top:75%">
        <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/7-576x1024.webp" alt="Gallery Image 6" />
      </div>
      <div class="image-item" style="left:50%;top:15%">
        <img src="https://nicolaipalmkvist.com/wp-content/uploads/2025/09/5-576x1024.webp" alt="Gallery Image 7" />
      </div>
    </div>
  </div>
</div>