.ych-category-boxes{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:stretch }
.ych-category-boxes.cols-1 .ych-cat-box{ width:100%; max-width:420px }
.ych-category-boxes.cols-2 .ych-cat-box{ width:calc(50% - 9px); min-width:280px }
.ych-category-boxes.cols-3 .ych-cat-box{ width:calc(33.333% - 12px); min-width:280px }
.ych-category-boxes.cols-4 .ych-cat-box{ width:calc(25% - 14px); min-width:220px }
.ych-category-boxes.cols-5 .ych-cat-box{ width:calc(20% - 14.4px); min-width:180px }

.ych-cat-box{ position:relative; overflow:hidden; border-radius:10px; }
.ych-cat-inner{ display:block; color:inherit; text-decoration:none; height:100%; width:100%; position:relative }
.ych-cat-image{ width:100%; height:auto; overflow:hidden }
.ych-cat-image img{ width:100%; height:auto; display:block; transition: transform 420ms cubic-bezier(.2,.9,.2,1) }
.ych-cat-title{ padding:14px 18px; font-weight:700; font-size:18px; color:#072126; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9)); text-align:center }

/* hover overlay */
.ych-cat-hover{ position:absolute; left:0; right:0; bottom:0; top:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px; background:linear-gradient(180deg, rgba(1,17,20,0.55), rgba(1,17,20,0.7)); color:#dff; opacity:0; transform:translateY(12px); transition: all 360ms cubic-bezier(.2,.9,.2,1) }
.ych-cat-desc{ margin-bottom:12px; max-width:90%; text-align:center }
.ych-cat-cta{ display:inline-block; padding:10px 18px; border-radius:26px; background:#00e6d0; color:#042227; font-weight:700; text-decoration:none; box-shadow:0 8px 26px rgba(0,230,208,0.12) }

/* hover effects */
.ych-cat-box:hover .ych-cat-image img, .ych-cat-box:focus-within .ych-cat-image img{ transform:scale(1.06) }
.ych-cat-box:hover .ych-cat-hover, .ych-cat-box:focus-within .ych-cat-hover{ opacity:1; transform:translateY(0) }

/* subtle floating border */
.ych-cat-box{ box-shadow:0 8px 30px rgba(6,24,24,0.06) }

/* small screens */
@media (max-width:720px){ 
    .ych-category-boxes{ gap:12px } 
    .ych-category-boxes.cols-2 .ych-cat-box,
    .ych-category-boxes.cols-3 .ych-cat-box,
    .ych-category-boxes.cols-4 .ych-cat-box,
    .ych-category-boxes.cols-5 .ych-cat-box { 
        width: calc(50% - 6px) !important; 
        min-width: 0 !important; 
        max-width: none !important; 
    }
}