.component-block{margin-top:var(--s-5);scroll-margin-top:var(--s-4);max-width:var(--content);min-width:0}
.component-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding-bottom:var(--s-2);border-bottom:var(--hairline) solid var(--line-structural)}
.component-heading h3{margin:0}
.component-description,.component-intro{max-width:var(--col-2);margin:var(--s-3) 0}
.component-sample{min-width:0;max-width:100%}
.component-sample > .editorial-layout{margin:0;padding:var(--s-3)}
.component-sample > .rel,.component-sample > .ftp{margin:0}
.component-sample > .rel{padding:var(--s-3)}
.component-sample .rel-body,.component-sample .rel-more{min-width:0}
.component-sample .rel-facts dd{overflow-wrap:anywhere}
.component-sample .editorial-layout h2.serif-heading-3{font-size:var(--fz-heading-3);line-height:var(--lh-heading-3);letter-spacing:var(--track-heading-3)}
.component-code{margin-top:var(--s-2);border-bottom:var(--hairline) solid var(--line-quiet);padding-bottom:var(--s-2)}
.component-code summary{cursor:pointer;list-style:disclosure-closed}
.component-code[open] summary{list-style:disclosure-open}
.component-code p{margin:var(--s-2) 0}
.component-code button{margin-right:var(--s-2)}
.component-code pre{margin-top:var(--s-2);max-width:100%;max-height:var(--col);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.component-code code{text-transform:none;letter-spacing:normal}
.component-code :focus-visible{outline:var(--focus-ring) solid var(--ink);outline-offset:var(--focus-offset)}
.publishing-specimens{align-items:start}
.publishing-specimen{margin:0;min-width:0}
.publishing-frame{display:block;width:100%;height:auto;border:0;background:var(--paper)}
.publishing-frame-poster{aspect-ratio:4/5}
.publishing-frame-reel{aspect-ratio:9/16}
.publishing-notes .med-text{padding:var(--s-3)}
.publishing-notes p{margin-top:var(--s-3)}
.publishing-notes .ctl-btn{margin-top:var(--s-4)}
@container monolith (max-width:600px){
 .component-heading{align-items:flex-start}
 .component-sample > .editorial-layout,.component-sample > .rel{padding:var(--s-2)}
 .component-sample .rel-dl{white-space:normal;overflow-wrap:anywhere}
 .component-sample .rel-facts{grid-template-columns:1fr;gap:var(--s-1)}
 .component-sample .rel-facts dd{margin-bottom:var(--s-2)}
}