.template-item,.templates-masonry{position:relative;width:100%;overflow:hidden}.templates-masonry{column-count:3;column-gap:2rem;z-index:1}@media (max-width:1024px){.templates-masonry{column-count:2}}@media (max-width:768px){.templates-masonry{column-count:1}}.template-item{display:inline-block;margin-bottom:2rem;break-inside:avoid;-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;transition:transform .3s,opacity .3s;opacity:0;animation:.5s forwards masonryFadeIn}@keyframes masonryFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.template-item img{width:100%;height:auto;display:block;transition:transform .3s,filter .3s}.template-item:hover img{transform:scale(1.03);filter:brightness(.9)}.template-item:hover{box-shadow:0 8px 18px rgba(0,0,0,.1)}.template-item .preview-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.3);opacity:0;transition:opacity .3s;z-index:10;pointer-events:none}.template-item:hover .preview-overlay{opacity:1;pointer-events:all}.template-item .preview-button{background-color:rgb(0 61 98);color:#fff;font-weight:700;font-size:1rem;padding:.5rem 1.25rem;border-radius:9999px;box-shadow:0 2px 8px rgba(0,0,0,.3);text-align:center;z-index:11;position:relative;transition:background-color .3s,transform .2s}.template-item:hover .preview-button{background-color:rgb(10 90 140);transform:scale(1.05)}.template-item .category-badge{position:absolute;top:.75rem;right:.75rem;background-color:#ff8c00;color:#fff;font-size:.75rem;font-weight:700;padding:.25rem .75rem;border-radius:9999px;white-space:nowrap;max-width:75%;overflow:hidden;text-overflow:ellipsis;text-align:right;z-index:12;box-shadow:0 2px 6px rgba(0,0,0,.15)}