.recommended-section{text-align:center;margin:50px auto 20px}
.recommended-title{font-size:18px;margin-bottom:14px;color:var(--accent);text-shadow:0 1px 4px color-mix(in srgb,var(--accent) 30%,transparent)}
.recommended-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.rec-item{display:block;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.rec-item:hover{transform:translateY(-4px)}

.rec-img-wrapper{width:100%;height:300px;overflow:hidden;border-radius:12px;border:1px solid var(--border-subtle);transition:box-shadow .25s}
.rec-img-wrapper img{width:100%;height:100%;object-fit:cover}

.rec-title{margin-top:6px;font-size:13px;font-weight:600;color:var(--text-primary);transition:color .25s}

.rec-item:hover .rec-img-wrapper{box-shadow:0 10px 20px rgba(0,0,0,.18)}
.rec-item:hover .rec-title{color:var(--accent)}

body.dark .rec-item:hover .rec-img-wrapper{box-shadow:0 10px 20px rgba(0,0,0,.6)}

@media(max-width:720px){
.recommended-grid{grid-template-columns:repeat(2,1fr)}
}