style(agent-office): match card image to 941x1672 aspect, fill grid width

- Card image aspect-ratio 1/1 → 941/1672 (real image ratio, no crop)
- object-fit cover → contain (defensive against rounding)
- Drop card aspect-ratio so it grows from natural image+name height
- Drop grid max-width 720px so grid fills the viewport width

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-18 00:00:30 +09:00
parent bcaf217b72
commit 2a9c8cb619

View File

@@ -54,14 +54,12 @@
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 16px; gap: 16px;
max-width: 720px; width: 100%;
margin: 0 auto;
} }
/* ===== Agent Card ===== */ /* ===== Agent Card ===== */
.ao-card { .ao-card {
position: relative; position: relative;
aspect-ratio: 1 / 1.15;
background: #1e293b; background: #1e293b;
border: 1px solid #334155; border: 1px solid #334155;
border-radius: 12px; border-radius: 12px;
@@ -126,9 +124,8 @@
} }
.ao-card-image { .ao-card-image {
flex: 1;
width: 100%; width: 100%;
aspect-ratio: 1 / 1; aspect-ratio: 941 / 1672;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
background: #0f172a; background: #0f172a;
@@ -137,7 +134,7 @@
.ao-card-image img { .ao-card-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: contain;
display: block; display: block;
} }
.ao-card-name { .ao-card-name {