*{box-sizing:border-box}body{background-color:#f5f9fc;font-family:Arial,sans-serif}.cn-list-body{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:20px}.cn-list-row,.cn-list-row-alternate{background:linear-gradient(135deg,#ffffff,#e3f2fd);border-radius:15px;box-shadow:0 8px 15px rgb(0 0 0 / .2);padding:20px;text-align:center;flex:1 1 calc(25% - 20px);max-width:calc(25% - 20px);box-sizing:border-box;overflow:hidden;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.4,0,.2,1),box-shadow 0.5s ease;perspective:1000px}.cn-list-row:hover,.cn-list-row-alternate:hover{transform:rotateY(360deg);box-shadow:0 12px 20px rgb(0 0 0 / .3)}.cn-list-row h3,.cn-list-row-alternate h3{font-size:1.5rem;color:#0077c2;margin-bottom:10px}.cn-list-row p,.cn-list-row-alternate p{font-size:1rem;color:#555;line-height:1.5}@media (max-width:1024px){.cn-list-row,.cn-list-row-alternate{flex:1 1 calc(33.33% - 20px);max-width:calc(33.33% - 20px)}}@media (max-width:768px){.cn-list-row,.cn-list-row-alternate{flex:1 1 calc(50% - 20px);max-width:calc(50% - 20px)}}@media (max-width:480px){.cn-list-row,.cn-list-row-alternate{flex:1 1 100%;max-width:100%}}