body { max-width: 850px; margin: 55px auto; padding: 0 20px; color: #222; line-height: 1.55; }
.layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; align-items: start; }
.profile img { width: 180px; max-width: 100%; height: auto; }
.profile p { margin: 12px 0; }
main h1 { margin: 0 0 2px; }
.subtitle { margin: 0 0 24px; }
main p { margin: 0 0 18px; }
.page { max-width: 720px; }
.page h1 { margin-bottom: 0.2em; }
li { margin-bottom: 5px; }
.pictures { display: flex; gap: 18px; flex-wrap: wrap; align-items: start; }
figure { margin: 10px 0; max-width: 100%; }
figure img { max-width: 100%; height: auto; }
figcaption { font-size: 0.9em; }
@media (max-width: 600px) { body { margin: 25px auto; } .layout { display: block; } .profile { margin-bottom: 28px; } .profile img { width: 140px; } }