/* Masonry layout for #infinite-list (Standard Display) */
#infinite-list {
  column-gap: 1.25rem; /* ระยะห่างระหว่างคอลัมน์ */
  column-count: 1;  /* ค่าเริ่มต้นสำหรับมือถือ: 1 คอลัมน์ */
}

#infinite-list > .notepaper { /* กำหนดเป้าหมายไปที่ .notepaper ที่เป็น child โดยตรง */
  break-inside: avoid-column; /* ป้องกันการตัดเนื้อหาข้ามคอลัมน์ */
  margin-bottom: 1.25rem;      /* ระยะห่างด้านล่างของแต่ละรายการ */
  /* .notepaper จะปรับความกว้างตามคอลัมน์โดยอัตโนมัติ */
  
}

/* Responsive column counts */
@media (min-width: 1440px) { /* larger than most 13-inch laptop viewports */
  #infinite-list {
    column-count: 2; /* 2 คอลัมน์ */
  }
}

@media (min-width: 1600px) { /* TV / wide desktop */
  #infinite-list {
    column-count: 3; /* 3 คอลัมน์ */
  }
}

@media (min-width: 2200px) { /* large TV / ultra-wide */
  #infinite-list {
    column-count: 4; /* 4 คอลัมน์ */
  }
}

@media (min-width: 1600px) {
  .container:has(#infinite-list-container) {
    max-width: min(92vw, 1800px);
  }

  #infinite-list-container {
    margin-left: auto;
    margin-right: auto;
  }
}