@scope(.lab--small-screens){#example-1 img{width:100%;max-width:100%}#example-1 .modular-wrap{width:100%;container-type:inline-size}#example-1 .modular{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:1.5rem;width:100%;display:grid;overflow-x:visible}@container (width<=30rem){#example-1 .modular{-webkit-overflow-scrolling:touch;grid-template-rows:1fr;grid-template-columns:none;grid-auto-columns:minmax(70%,1fr);grid-auto-flow:column;gap:1.5rem;padding-block-end:1.5rem;display:grid;overflow-x:auto}}@media screen and (width>=64em){#example-1{grid-template-columns:1fr 3fr;gap:0 1.5rem;display:grid}}#example-2 .container{width:100%;position:relative;overflow-x:auto;container-type:inline-size}#example-2 .content{grid-template-columns:1fr 1fr;gap:0;width:100%;display:grid}#example-2 .content>:first-child{padding-inline-start:1.5rem}#example-2 .content>:nth-child(2){padding-inline-end:1.5rem}#example-2 .content>:first-child img{float:right;shape-outside:url(/lab/img/shape-outside-2-left.webp);shape-image-threshold:.5;shape-margin:1rem;width:40%;margin-block-end:1rem}#example-2 .content>:nth-child(2) img{float:left;shape-outside:url(/lab/img/shape-outside-2-right.webp);shape-image-threshold:.5;shape-margin:1rem;width:40%;margin-block-end:1rem}#example-2 .content>* h3,#example-2 .content>:nth-child(2) p:first-of-type{margin-block-start:5rem}#example-2 .content>:first-child p{padding-inline-end:.75rem}#example-2 .content>:nth-child(2) p{padding-inline-start:.75rem}@container (width<=48rem){#example-2 .container{overflow-x:scroll}#example-2 .content{-webkit-overflow-scrolling:touch;grid-template-columns:85vw 85vw}#example-2 p{font-size:14px}}#example-3 .spread-wrap{border:10px solid var(--color-border);box-sizing:border-box;width:100%;padding:1.5rem;overflow-x:auto;container-type:inline-size}#example-3 .spread-wrap .content img:first-of-type{float:left;shape-outside:url(/lab/img/shape-outside-5-1.webp);shape-margin:1.5rem;width:45%}#example-3 .spread-wrap .content img:nth-of-type(2){float:right;shape-outside:url(/lab/img/shape-outside-5-2.webp);shape-margin:1.5rem;width:35%}#example-3 .spread-wrap .content p{font-size:14px;line-height:1.6}@container (width<=48rem){#example-3 .spread-wrap .content{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;align-items:center;gap:1.5rem;display:flex}#example-3 .spread-wrap .content>*{scroll-snap-align:start;flex:0 0 85cqi;min-width:85cqi}#example-3 .spread-wrap .content img{float:none;object-fit:contain;shape-margin:0;shape-outside:none;flex-shrink:0;max-width:100%;height:auto;display:block}#example-3 .spread-wrap .content img:nth-of-type(2){order:100}}#example-4>p{font-size:11px}#example-4 img[src*=svg]{width:unset;max-width:unset;margin-block-start:var(--spacing-l)}#example-4 img[src*=webp]{width:100%;max-width:100%}@media (orientation:landscape){#example-4 img[src*=webp]{float:left;shape-outside:polygon(0% 0%, 35% 0%, 42% 10%, 43% 16%, 48% 28%, 45% 31%, 42% 59%, 75% 48%, 76% 59%, 36% 72%, 35% 78%, 48% 74%, 64% 100%, 0% 100%);shape-margin:20px}}}@media (prefers-reduced-motion:reduce){.lab--small-screens *,.lab--small-screens :before,.lab--small-screens :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}