.personal-introduction { width: min(1080px, calc(100% - 40px)); margin: 48px auto; padding: clamp(24px, 4vw, 44px); display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 36px; background: #faf8f3; border: 1px solid #dfE5dc; border-radius: 20px; color: #384039; }
.personal-introduction img { display: block; width: 180px; height: 216px; object-fit: cover; border-radius: 12px; }
.personal-introduction .personal-eyebrow { margin: 0 0 8px; color: #355e4a; font: 600 12px/1.5 'DM Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.personal-introduction h2 { margin: 0 0 14px; color: #173d32; font: 400 clamp(28px, 3vw, 36px)/1.15 'Libre Caslon Display', Georgia, serif; }
.personal-introduction .personal-story { margin: 0; max-width: 660px; font: 400 16px/1.75 'DM Sans', sans-serif; }
.personal-introduction .personal-signature { margin: 14px 0 0; color: #355e4a; font: 500 14px/1.5 'DM Sans', sans-serif; }
@media (max-width: 600px) { .personal-introduction { grid-template-columns: 1fr; gap: 22px; margin: 32px auto; } .personal-introduction img { width: 140px; height: 168px; } }