:root{--section-radius:25px;--section-inner-radius:20px;--section-padding:100px;--section-gap:8px;@media screen and (max-width:1440px){--section-padding:80px}@media screen and (max-width:1200px){--section-padding:70px}@media screen and (max-width:1020px){--section-padding:60px}@media screen and (max-width:660px){--section-padding:40px}@media screen and (max-width:480px){--section-padding:16px}}html{margin:0;padding:0}body{margin:0;padding:20px;@media screen and (max-width:480px){padding-bottom:8px;padding-left:8px;padding-right:8px;padding-top:8px}}.section{border-radius:var(--section-radius);box-sizing:border-box;margin-bottom:var(--section-gap);padding:var(--section-padding);transition:padding 1s;width:100%;&>.wrapper{margin:0 auto;max-width:1200px;width:100%}}.section.animate{.from-bottom,.from-left,.from-opacity,.from-right,.from-top{animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:1;animation-timing-function:ease-in-out;&.pause1{animation-delay:1s}&.pause1_5{animation-delay:1.5s}&.pause2{animation-delay:2s}&.pause2_25{animation-delay:2.25s}&.pause2_5{animation-delay:2.5s}&.pause3{animation-delay:3s}&.pause4{animation-delay:4s}&.quick{animation-duration:.5s}}}@keyframes from-left{0%{opacity:0;transform:translateX(-100%)}to{opacity:100%;transform:translateX(0)}}@keyframes from-right{0%{opacity:0;transform:translateX(100%)}to{opacity:100%;transform:translateX(0)}}@keyframes from-top{0%{opacity:0;transform:translateY(-100%)}to{opacity:100%;transform:translateX(0)}}@keyframes from-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:100%;transform:translateX(0)}}@keyframes from-opacity{0%{opacity:0}to{opacity:100%}}.from-left{opacity:0;.section.animate &{animation-name:from-left}}.from-right{opacity:0;.section.animate &{animation-name:from-right}}.from-top{opacity:0;.section.animate &{animation-name:from-top}}.from-bottom{opacity:0;.section.animate &{animation-name:from-bottom}}.from-opacity{opacity:0;.section.animate &{animation-name:from-opacity}}.bio{display:grid;font-family:Inter;font-size:24px;font-weight:700;gap:8px 26px;grid-template-areas:"photo person" "photo position" "description description";grid-template-columns:70px 1fr;grid-template-rows:auto auto 1fr;.photo{background:var(--photo) center center no-repeat;background-size:cover;border-radius:50%;grid-area:photo;height:70px;width:70px}.description,.person,.position{color:#42464c}.person{grid-area:person}.position{font-size:16px;font-weight:300;grid-area:position;line-height:24px}.description{font-size:20px;font-weight:400;grid-area:description;line-height:28px;padding-top:24px}&.dark{backdrop-filter:blur(100px);background:rgba(24,26,28,.5);border:1px solid hsla(0,0%,100%,.1);border-radius:var(--section-inner-radius);padding:30px;.photo{border:1px solid #fff}.description,.description *,.person,.position{color:#fff}}@media screen and (max-width:480px){gap:8px 12px;grid-template-columns:40px 1fr;grid-template-rows:auto auto 1fr;.description,.person,.position{font-size:18px;line-height:24px}.description{padding-top:8px}.photo{height:40px;width:40px}}}