/*
  Главная PROKOFIEVS: черное и белое, Onest 400/500.
  Десктоп: слева имя, два квадратных портрета и строка, справа береста на всю высоту.
  Телефон: имя, полоса бересты, портреты, строка, ссылка.
  Портреты меняют эмоцию при наведении (на телефоне — по нажатию).
*/
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Onest,sans-serif;color:#111;background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit}

.page{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;
  grid-template-areas:"name birch" "about birch" "links birch";min-height:100vh;min-height:100svh}
.name{grid-area:name;padding:48px 48px 0;font-size:clamp(44px,6.4vw,120px);font-weight:500;letter-spacing:.02em;line-height:1}
.about{grid-area:about;align-self:center;padding:48px}
.people{display:flex;gap:24px}
.face button{display:block;position:relative;width:clamp(120px,11vw,200px);aspect-ratio:1;border:0;padding:0;background:#ddd;cursor:pointer;overflow:hidden}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face .alt{opacity:0}
.face button:hover .alt,.face button.on .alt{opacity:1}
.face figcaption{font-size:15px;margin-top:10px}
.what{font-size:20px;line-height:1.45;margin-top:32px;max-width:26ch}
.links{grid-area:links;display:flex;align-items:flex-start;gap:28px;padding:0 48px 48px;font-size:15px}
.links a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.birch{grid-area:birch;background:#ddd url(assets/birch.jpg) center/cover}

@media (max-width:767px),(max-width:1100px) and (orientation:portrait){
  .page{align-content:start;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"name" "birch" "about" "links"}
  .name{padding:24px 20px 20px;font-size:clamp(40px,13vw,72px)}
  .birch{height:28vh;min-height:180px}
  .about{padding:28px 20px 0}
  .face button{width:clamp(120px,38vw,180px)}
  .what{font-size:18px;margin-top:24px}
  .links{padding:28px 20px 32px}
}
@media (min-width:600px) and (max-width:1100px) and (orientation:portrait){
  .name{padding:40px 40px 28px}
  .birch{height:34vh}
  .about{padding:40px 40px 0}
  .what{font-size:20px}
  .links{padding:32px 40px 48px}
}