:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.site {
  display: grid;
  grid-template-columns: minmax(0, 560px) 180px;
  gap: 96px;
  width: min(100% - 64px, 980px);
  margin: 52px auto 80px;
}
.menu { grid-column: 2; grid-row: 1; text-align: right; }
main { grid-column: 1; grid-row: 1; }
nav { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
nav a { font-size: 15px; line-height: 1.4; }
img {
  display: block;
  width: 130px;
  height: 130px;
  object-fit: cover;
  margin-bottom: 24px;
}
h1 {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  margin: 0 0 5px;
}
p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 20px;
}
a {
  color: #28558d;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: #153254; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 700px) {
  .site { display: block; width: calc(100% - 40px); margin: 28px auto 56px; }
  .menu { text-align: left; margin-bottom: 40px; }
  nav { flex-direction: row; gap: 16px; }
  h1 { margin-bottom: 10px; }
}