body{height:max-content;min-height:100vh;max-height:max-content;padding-bottom:0}header{margin-bottom:2rem;margin-left:auto;margin-right:auto;max-width:40rem;>form{>button{display:none}}}section{>img{width:20rem;height:20rem;margin-bottom:2rem;object-fit:cover}>.profile-info{gap:1.5rem;>ul{margin:0 auto;>li{float:left;font-size:var(--fs-xs)}}>.profile-info__langs{>*{margin-top:1rem;margin-bottom:1rem;&:first-child{margin-top:0}&:last-child{margin-bottom:0}}>img{display:block;margin-left:auto;margin-right:auto}}}>main{align-items:center;position:relative;gap:2rem;padding:2rem;margin-top:7rem;background-color:var(--primary-color-10);color:var(--primary-color-100);>header{position:absolute;top:-4.28rem;left:0;margin-bottom:0;background-color:inherit;border-radius:1.2rem 1.2rem 0 0;padding:1rem}.buttons{width:100%;place-items:center;display:grid;grid-row-gap:3rem;row-gap:3rem;>button{z-index:0;width:23rem;height:23rem;&:focus,&:hover{position:relative;top:-1.2rem;left:-1.2rem;box-shadow:1.2rem 1.2rem 0 var(--primary-color-50)}}}}}@media (min-width:576px){section{>main{.buttons{grid-template-columns:repeat(2,1fr);column-gap:2rem}}}}@media (min-width:992px){section{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;grid-row-gap:8rem;row-gap:8rem;grid-template-areas:"img div" "main main";flex:1 1;>img{grid-area:img;margin-left:auto}>.profile-info,>img{place-self:center;margin-bottom:0}>.profile-info{grid-area:div;margin-left:6rem;margin-right:auto;>ul{margin-left:0;margin-right:0}>.profile-info__langs{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;>p{margin:0}>img{margin:0}}}>main{grid-area:main;margin-top:0;>.buttons{column-gap:4rem;>button{&:nth-child(odd){place-self:end}&:nth-child(2n){place-self:start}}}}}}@media (min-width:1400px){body{display:flex;flex-direction:column;>header{align-self:center;min-width:40rem;margin-left:0;margin-right:0}}section{>main{gap:4rem;>.buttons{grid-auto-flow:column;grid-template-columns:unset;>button{&:nth-child(2n),&:nth-child(odd){place-self:unset}}}}}}