.banner-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px;max-width:1000px;margin:auto}.banner-card{border-radius:12px;overflow:hidden;position:relative;box-shadow:0 4px 12px rgba(0,0,0,.1);transition:.3s ease}.banner-card:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(0,0,0,.2)}.banner-img{position:relative;width:100%;max-height:600px;overflow:hidden}.banner-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.banner-card:hover img{transform:scale(1.1)}.banner-overlay{position:absolute;bottom:0;width:100%;padding:15px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}.banner-overlay h3{color:#fff;font-size:12px;margin:0;line-height:1.3}.pagination{text-align:center;margin:30px 0}.pagination a,.pagination span{display:inline-block;margin:5px;padding:8px 14px;border-radius:6px;text-decoration:none;font-size:14px;background:#eee;color:#333;transition:.3s}.pagination a:hover{background:#5c6bc0;color:#fff}.pagination .active{background:#5c6bc0;color:#fff;font-weight:700}@media(max-width:900px){.banner-list{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.banner-list{display:flex;overflow-x:auto;gap:15px;padding:15px;max-height:none;scroll-snap-type:x mandatory}.banner-card{min-width:80%;flex:none;scroll-snap-align:start}.banner-img{height:400px}.banner-list::-webkit-scrollbar{display:none}}