HTML
<section style="width: 100%; padding: 24px 0; background-color: #f6f6f6; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif;"> <div style="display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 24px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #000096 #e0e0e0;"> <a href="{{ url_1 }}" style="flex: 0 0 auto; width: 280px; aspect-ratio: 473 / 840; display: block; border-radius: 12px; overflow: hidden; scroll-snap-align: start; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,150,0.05); text-decoration: none; cursor: pointer;"> <img src="{{ image_1 }}" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'" alt="Kampanya 1"> </a> <a href="{{ url_2 }}" style="flex: 0 0 auto; width: 280px; aspect-ratio: 473 / 840; display: block; border-radius: 12px; overflow: hidden; scroll-snap-align: start; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,150,0.05); text-decoration: none; cursor: pointer;"> <img src="{{ image_2 }}" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'" alt="Kampanya 2"> </a> <a href="{{ url_3 }}" style="flex: 0 0 auto; width: 280px; aspect-ratio: 473 / 840; display: block; border-radius: 12px; overflow: hidden; scroll-snap-align: start; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,150,0.05); text-decoration: none; cursor: pointer;"> <img src="{{ image_3 }}" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'" alt="Kampanya 3"> </a> <a href="{{ url_4 }}" style="flex: 0 0 auto; width: 280px; aspect-ratio: 473 / 840; display: block; border-radius: 12px; overflow: hidden; scroll-snap-align: start; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,150,0.05); text-decoration: none; cursor: pointer;"> <img src="{{ image_4 }}" style="width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease;" onmouseover="this.style.transform='scale(1.04)'" onmouseout="this.style.transform='scale(1)'" alt="Kampanya 4"> </a> </div> </section>