:root{

    --mask-color: #0d0d0f;
    --gap: 15px;
    --col-width: 18vw;
    --visible-count: 1.5;
    --visible-count-1: 1;
  }
  body{

   
    min-height: 100vh;
    align-items: center;
    
   
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }


  .gallery{
    position: relative;
    display: flex;
    gap: var(--gap);
    /* 高度 = 每張圖高(=寬) * 可見張數 */
    height: calc(var(--col-width) * var(--visible-count));
    overflow: hidden;
    justify-content: center;
    
  }

  .col{
    position: relative;
    width: var(--col-width);
    height: 100%;
    overflow: hidden;
    flex: 0 0 var(--col-width);
   
  }

  .track{
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    will-change: transform;
  }

  .track img{
    width: 100%;
    aspect-ratio: 1.5 / 1;
    object-fit: cover;
    display: block;
    border-radius: px;
    background: #ffffff2b;
  }

  /* 往上捲動：track 內容從 0 移到 -50% */
  .col-up .track{
    animation: scrollUp 82s linear infinite;
  }
  /* 往下捲動：track 內容從 -50% 移到 0 */
  .col-down .track{
    animation: scrollDown 82s linear infinite;
  }

  @keyframes scrollUp{
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }
  @keyframes scrollDown{
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
  }

  /* 上下模糊遮罩 */
  .fade{
    position: absolute;
    left: 0;
    right: 0;
    height: 29%;
    pointer-events: none;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .fade-top{
    top: 0;
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    background: linear-gradient(to bottom, var(--mask-color) 15%, transparent 100%);
  }
  .fade-bottom{
    bottom: 0;
    mask-image: linear-gradient(to top, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
    background: linear-gradient(to top, var(--mask-color) 15%, transparent 100%);
  }

  /* 手機版：兩欄，欄寬用 vw 依螢幕縮放 */
  @media (max-width: 900px){
    :root{
      --col-width: 32vw;
      --gap: 10px;
    }
  }