/* portfólio de sites: card com print do celular */
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-bottom: 48px; }
.site-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 14px 14px 18px; }
.site-card .shot { display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: 14px; background: var(--line); margin-bottom: 8px; }
.site-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .4s; }
.site-card:hover img { transform: scale(1.03); }
.site-card .type { font: 600 12px/1.3 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-card .title { font: 700 20px/1.25 var(--font-head); }
.site-card .title small { display: block; font: 500 15px/1.45 var(--font-body); color: var(--muted); margin-top: 4px; }
.site-card .see { font: 600 15px/1 var(--font-head); color: var(--accent); margin-top: 6px; }
.sub-head { font: 700 22px/1.3 var(--font-head); margin: 0 0 16px; }