/* Monet Carousel */
  .monet-carousel {
    width:100%;
    
    overflow:hidden;
    position:relative;
    touch-action: pan-y; /* allow vertical scrolling by default; we'll prevent when horizontal swipe detected */
  }

  .monet-carousel .monet-carousel-track {
    display:flex;
    height:100%;
    transition: transform 700ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }

  .monet-carousel .monet-carousel-slide {
    min-width:100%;
    height:100%;
    /* flex-shrink:0; */
    position:relative;
    background-color: transparent;
  }

  .monet-carousel .monet-carousel-slide img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    -webkit-user-drag:none;
    user-select:none;
    pointer-events:none;
  }

  .monet-carousel .overlay {
    position:absolute;
    inset:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    color:#fff;
    text-shadow:0 2px 6px rgba(0,0,0,.6);
    font-size:1.2rem;
  }

  .monet-carousel .monet-carousel-controls {
    position:absolute;
    left:0;
    right:0;
    bottom:8px;
    display:flex;
    justify-content:center;
    gap:8px;
    z-index:6;
    pointer-events:auto;
    align-items: baseline;
  }

  .monet-carousel .monet-carousel-dot {
    bottom: 0;
    width:22px;
    height:12px;
    border-radius:6px;
    background:rgba(255,255,255,.45);
    border:0;
    padding:0;
    cursor:pointer;
    transition: .1s;
  }

  .monet-carousel .monet-carousel-dot:hover {
    height:14px;
    border-radius:7px;
    transition: .1s;
  }

  .monet-carousel .monet-carousel-dot.active {
    background:rgba(255,255,255,.95);
  }