순수 CSS로만 Sticky Scroll Cards 만들기

export default function StickyScroll() {
  return (
    <>
      <div style={{ display: "flex", width: "100%", justifyContent: "center", height: "65vh", alignItems: "center" }}>
        스크롤을 해보겠슴다...
      </div>

      <div style={{ 
        position: "relative", 
        display: "flex", 
        flexDirection: "column", 
        maxWidth: "1000px", 
        gap: "30px", 
        margin: "50px auto", 
        alignItems: "center" 
      }}>
        <div style={{ 
          width: "100%", 
          margin: "0 100px", 
          boxSizing: "border-box", 
          minHeight: "480px", 
          borderRadius: "32px", 
          display: "flex", 
          alignItems: "center", 
          justifyContent: "center", 
          fontSize: "90px", 
          fontWeight: "500", 
          color: "#000", 
          border: "1px solid gray", 
          position: "sticky", 
          bottom: "200px", 
          backgroundColor: "rgb(255, 192, 226)", 
          zIndex: 4 
        }}>1</div>

        <div style={{ 
          width: "100%", 
          margin: "0 100px", 
          boxSizing: "border-box", 
          minHeight: "480px", 
          borderRadius: "32px", 
          display: "flex", 
          alignItems: "center", 
          justifyContent: "center", 
          fontSize: "90px", 
          fontWeight: "500", 
          color: "#000", 
          border: "1px solid gray", 
          position: "sticky", 
          bottom: "150px", 
          backgroundColor: "rgb(255, 228, 192)", 
          zIndex: 3 
        }}>2</div>

        <div style={{ 
          width: "100%", 
          margin: "0 100px", 
          boxSizing: "border-box", 
          minHeight: "480px", 
          borderRadius: "32px", 
          display: "flex", 
          alignItems: "center", 
          justifyContent: "center", 
          fontSize: "90px", 
          fontWeight: "500", 
          color: "#000", 
          border: "1px solid gray", 
          position: "sticky", 
          bottom: "100px", 
          backgroundColor: "rgb(249, 255, 192)", 
          zIndex: 2 
        }}>3</div>

        <div style={{ 
          width: "100%", 
          margin: "0 100px", 
          boxSizing: "border-box", 
          minHeight: "480px", 
          borderRadius: "32px", 
          display: "flex", 
          alignItems: "center", 
          justifyContent: "center", 
          fontSize: "90px", 
          fontWeight: "500", 
          color: "#000", 
          border: "1px solid gray", 
          position: "sticky", 
          bottom: "50px", 
          backgroundColor: "rgb(192, 233, 255)", 
          zIndex: 1 
        }}>4</div>
      </div>

      <div style={{ display: "flex", width: "100%", justifyContent: "center", height: "65vh", alignItems: "center" }}>
        스크롤이 끝났습니다...
      </div>
    </>
  );
}

---