:root{--neutral-100: hsl(0, 0%, 100%);--neutral-200: hsl(210, 46%, 95%);--neutral-300: hsl(212, 23%, 69%);--neutral-600: hsl(214, 17%, 51%);--neutral-800: hsl(217, 19%, 35%);--shadow: hsl(210, 29%, 84%, .5)}:root{--main-font-family: "Manrope", sans-serif;--font-weight-medium: 500;--font-weight-bold: 700}*,*:before,*:after{box-sizing:inherit}html{box-sizing:border-box}body{display:grid;margin:0;min-height:100svh;scrollbar-gutter:stable;font-family:var(--main-font-family);font-optical-sizing:auto;font-style:normal;background:var(--neutral-200)}img{max-inline-size:100%;block-size:auto;object-fit:cover}input,textarea,button{font-family:inherit}.visually-hidden{position:absolute!important;height:1px!important;width:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.pic-comp{display:block;overflow:hidden}.pic-comp img{width:100%;height:100%}.main{margin:auto 1.5rem}.article{border-radius:.625rem;overflow:hidden;background:var(--neutral-100);box-shadow:0 2.5rem 2.5rem -.625rem var(--shadow);position:relative}.article__picture{aspect-ratio:327/200}.article__picture img{object-position:0 -1rem}.article__heading{font-size:1.25rem;line-height:1.3;color:var(--neutral-800);margin:2rem 1.875rem 0}.article__excerpt{font-size:.813rem;line-height:1.4;color:var(--neutral-600);letter-spacing:.01rem;margin:1.5rem 1.875rem 0}.article__footer{display:grid;gap:0 1rem;grid-template-columns:2.5rem 1fr 2rem;margin:3rem 1.875rem 1.125rem;align-items:center}.article__author-picture{border-radius:100%;grid-column:1;grid-row:1/3}.article__author{font-size:.813rem;line-height:1.4;color:var(--neutral-800);margin:0;grid-column:2;grid-row:1}.article__date{font-size:.813rem;line-height:1.4;color:var(--neutral-300);grid-column:2;grid-row:2}.article__share-button{grid-column:3;grid-row:1/3;border-radius:100%;overflow:hidden;text-indent:-100rem;aspect-ratio:1;border:0;background-color:var(--neutral-200);background-image:url(/article-preview-component/images/icon-share.svg);background-position:center;background-repeat:no-repeat;z-index:1}.article__share{background:var(--neutral-800);position:absolute;left:0;right:0;bottom:-4.75rem;display:flex;align-items:center;gap:1rem;min-height:4.75rem;padding:1.5rem 1.875rem;transition:bottom .25s ease-out}.article__share.active{bottom:0}.article__share-label{font-size:.813rem;line-height:1.4;letter-spacing:.2rem;text-transform:uppercase;color:var(--neutral-300);margin:0 1rem 0 0}.article__share-link{line-height:0}