/* Basic Reset (optional) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Carousel Container */
  .carousel-container {
    width: 100%;
    overflow-x: auto;            /* Horizontal scroll on desktop */
    overflow-y: hidden;
    
    /* Scroll Snap: horizontal, mandatory snapping */
    scroll-snap-type: x mandatory;
  
    background-color: inherit;
    border: 1px solid #F1F2F9;
    margin: 0 auto;
    /* If you want a max width, uncomment:
    max-width: 1200px; 
    */
  }
  
  /* Carousel Track: 
     - Use Flexbox
     - Use gap instead of margin for spacing
  */
  .carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;        /* Spacing between items */
  }
  
  /* Carousel Item */
  .carousel-item {
    flex: 0 0 auto;               /* Don’t shrink or grow */
    width: 320px;                 /* Fixed ad width */
    height: 400px;                /* Fixed ad height */
  
    /* Center the ad (the <ins> element) if needed */
    display: flex;
    align-items: center;
    justify-content: center;
  
    background-color: #fff;
    border: 1px solid #F1F2F9;
  
    /* Scroll Snap: each item starts a new snap point */
    scroll-snap-align: start;
  }
  
  /* Responsive: Stack items vertically on smaller screens */
  @media (max-width: 768px) {
    .carousel-track {
      flex-wrap: wrap;
      flex-direction: column;
      align-items: center;
    }
    
    .carousel-item {
      width: 320px;     /* Or 100%, then max-width: 320px if you want it fluid */
    }
  }