.category-filter-wrapper{display:flex;justify-content:center;gap:12px;margin-bottom:30px;flex-wrap:wrap}.category-btn{padding:8px 20px;border-radius:25px;border:1px solid #ccc;background:#fff0;color:#333;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease}.category-btn:hover,.category-btn.active{background:#000;color:#fff;border-color:#000}@media (max-width:768px){.category-filter-wrapper{justify-content:flex-start;overflow-x:auto;padding-bottom:8px}.category-btn{white-space:nowrap}}.main-cards-container{display:flex;gap:14px;width:100%;height:530px;background:#fff;margin-bottom:14px}.main-cards-container.one-card,.main-cards-container.two-card{height:auto}.main-cards-container.one-card .card-item-box,.main-cards-container.two-card .card-item-box{height:530px}.card-item-box{flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);height:100%;border-radius:8px;overflow:hidden;position:relative;transition:flex 0.6s cubic-bezier(.4,0,.2,1),max-width 0.6s cubic-bezier(.4,0,.2,1);cursor:pointer}.card-image{width:100%;height:100%;position:absolute;top:0;left:0;transition:width 0.6s cubic-bezier(.4,0,.2,1);z-index:1}.card-image img{width:100%;height:100%;object-fit:fill}.card-content{position:absolute;top:0;right:0;width:0;height:100%;opacity:0;background:#fff;overflow-y:auto;transition:width 0.6s ease,opacity 0.6s ease}.card-item-box:hover{flex:1 1 80%;max-width:80%}.card-item-box:hover .card-image{width:40%}.card-item-box:hover .card-content{width:60%;opacity:1}.main-cards-container:has(.card-item-box:hover) .card-item-box:not(:hover){flex:1 1 20%;max-width:20%}@media (max-width:768px){.category-filter-wrapper{justify-content:flex-start;overflow-x:auto;padding-bottom:8px}.category-btn{white-space:nowrap}}.main-cards-container{display:flex;gap:14px;width:100%;height:530px;background:#fff;margin-bottom:14px}.main-cards-container.one-card,.main-cards-container.two-card{height:auto}.main-cards-container.one-card .card-item-box,.main-cards-container.two-card .card-item-box{height:530px}.card-item-box{flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);height:100%;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;transition:flex 0.6s cubic-bezier(.4,0,.2,1),max-width 0.6s cubic-bezier(.4,0,.2,1)}.card-image{position:absolute;inset:0;width:100%;height:100%;z-index:1;transition:width 0.6s cubic-bezier(.4,0,.2,1)}.card-image img{width:100%;height:100%;object-fit:cover}.card-content{position:absolute;top:0;right:0;width:0;height:100%;opacity:0;background:#fff;overflow-y:auto;padding:24px;transition:width 0.6s cubic-bezier(.4,0,.2,1),opacity 0.4s ease;z-index:2}.card-item-box:hover,.card-item-box.active{flex:1 1 80%;max-width:80%}.card-item-box:hover .card-image,.card-item-box.active .card-image{width:40%}.card-item-box:hover .card-content,.card-item-box.active .card-content{width:60%;opacity:1}.main-cards-container:has(.card-item-box:hover) .card-item-box:not(:hover),.main-cards-container:has(.card-item-box.active) .card-item-box:not(.active){flex:1 1 20%;max-width:20%}@media (max-width:768px){.main-cards-container{flex-direction:column;height:auto}.card-item-box{width:100%!important;max-width:100%!important;height:auto;flex:none!important}.card-image{position:relative;width:100%;height:220px}.card-content{position:relative;width:100%;height:auto;opacity:0;padding:16px;display:none}.card-item-box.active .card-content{display:block;opacity:1}.card-item-box.active .card-image{height:220px}.main-cards-container:has(.card-item-box:hover) .card-item-box:not(:hover){flex:none;max-width:100%}}