/* Portfolio 3x3 responsive square grid */ .oru-portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1200px; margin: 20px auto; padding: 8px; box-sizing: border-box; } .oru-portfolio a { display: block; position: relative; width: 100%; padding-top: 100%; overflow: hidden; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); text-decoration: none; background: #f5f5f5; } .oru-portfolio .thumb { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; transition: transform .45s ease, filter .35s ease; } .oru-portfolio a:hover .thumb { transform: scale(1.05); filter: brightness(0.95); } .oru-portfolio .overlay { position: absolute; left:0; right:0; bottom:0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.45)); color: #fff; font-family: Arial, sans-serif; font-size: 14px; display:flex; align-items:flex-end; box-sizing: border-box; } .oru-portfolio .title { margin: 0; line-height: 1.1; font-weight:600; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* Responsive */ @media (max-width: 900px) { .oru-portfolio { grid-template-columns: repeat(2, 1fr); gap:10px; } } @media (max-width: 480px) { .oru-portfolio { grid-template-columns: 1fr; gap:10px; } } ]]>