@reuters-graphics/graphics-components 3.0.2 → 3.0.4

package/dist/components/@types/global.d.ts

@@ -21,7 +21,7 @@ export interface ScrollerStep {
     /**
      * A background component
      */
-    background: Component;
+    background: Component | undefined;
     /**
      * Optional props for background component
      */

package/dist/components/Article/Article.mdx

@@ -105,7 +105,7 @@ If you're not using our `Block` component, you can still inherit the column widt
     }
     &.fluid {
       width: calc(100% + 30px);
-      margin-left: -15px;
+      margin-inline-start: -15px;
       max-width: none;
     }
   }

package/dist/components/Article/Article.stories.svelte

@@ -66,13 +66,13 @@
 
 :global(#article-story-basic, #article-column-widths-demo) {
   width: calc(100% + 30px);
-  margin-left: -15px;
+  margin-inline-start: -15px;
 }
 
 :global(#article-column-widths-demo) {
   background-color: #ddd;
   position: relative;
-  margin-bottom: 10px;
+  margin-block-end: 10px;
 }
 
 :global(#article-column-widths-demo .article-boundaries) {
@@ -89,9 +89,9 @@
 :global(#article-column-widths-demo div.article-block) {
   height: 300px;
   background: #81a1c1;
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   height: 50px;
-  padding-left: 3px;
+  padding-inline-start: 3px;
   color: white;
   font-size: 1rem;
 }

package/dist/components/BeforeAfter/BeforeAfter.stories.svelte

@@ -40,13 +40,13 @@
     afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
   >
     {#snippet beforeOverlay()}
-      <div class="overlay p-3 before text-left">
+      <div class="overlay p-3 before">
         <p class="h4 font-bold">July 7, 2020</p>
         <p class="body-note">Initially, this site was far smaller.</p>
       </div>
     {/snippet}
     {#snippet afterOverlay()}
-      <div class="overlay p-3 after text-right">
+      <div class="overlay p-3 after">
         <p class="h4 font-bold">Oct. 20, 2020</p>
         <p class="body-note">But then forces built up.</p>
       </div>

package/dist/components/BeforeAfter/BeforeAfter.svelte

@@ -284,6 +284,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 /* Scales by 1.125 */
 button.before-after-container {
   box-sizing: content-box;
+  text-align: inherit;
 }
 button.before-after-container img {
   top: 0;
@@ -301,10 +302,10 @@ button.before-after-container .overlay-container {
   top: 0;
 }
 button.before-after-container .overlay-container :global(:first-child) {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 button.before-after-container .overlay-container :global(:last-child) {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 button.before-after-container .overlay-container.before {
   left: 0;
@@ -352,18 +353,18 @@ button.before-after-container .overlay-container.after {
   height: 0;
   user-select: none;
   position: relative;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid transparent;
+  border-block-start: 10px solid transparent;
+  border-block-end: 10px solid transparent;
 }
 .handle .arrow-right {
-  left: 19px;
-  bottom: 14px;
-  border-left: 10px solid var(--before-after-handle-colour);
+  inset-inline-start: 19px;
+  inset-block-end: 14px;
+  border-inline-start: 10px solid var(--before-after-handle-colour);
 }
 .handle .arrow-left {
-  left: 3px;
-  top: 6px;
-  border-right: 10px solid var(--before-after-handle-colour);
+  inset-inline-start: 3px;
+  inset-block-start: 6px;
+  border-inline-end: 10px solid var(--before-after-handle-colour);
 }
 
 .before-after-caption :global(p) {
@@ -372,6 +373,6 @@ button.before-after-container .overlay-container.after {
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }</style>

package/dist/components/Block/Block.stories.svelte

@@ -129,7 +129,7 @@
   background-color: #ddd;
   position: relative;
   width: calc(100% + 30px);
-  margin-left: -15px;
+  margin-inline-start: -15px;
 }
 
 :global(#block-demo-article .article-boundaries) {
@@ -145,7 +145,7 @@
 }
 
 :global(#block-demo-article div.article-block.block-snap-widths-demo) {
-  margin-bottom: 2px;
+  margin-block-end: 2px;
   height: 40px;
   font-size: 11px;
 }
@@ -156,7 +156,7 @@
 
 :global(#block-demo-article .label,
     #block-demo-article div.article-block.block-snap-widths-demo) {
-  padding-left: 3px;
+  padding-inline-start: 3px;
   color: white;
   font-weight: 500;
 }

package/dist/components/Byline/Byline.stories.svelte

@@ -9,7 +9,7 @@
     argTypes: {
       align: {
         control: 'select',
-        options: ['left', 'center'],
+        options: ['auto', 'center'],
       },
     },
   });

package/dist/components/Byline/Byline.svelte

@@ -21,7 +21,7 @@
     /**
      * Alignment of the byline.
      */
-    align?: 'left' | 'center';
+    align?: 'auto' | 'center';
     /**
      * Add an id to to target with custom CSS.
      * @type {string}
@@ -54,7 +54,7 @@
     authors = [],
     publishTime,
     updateTime,
-    align = 'left',
+    align = 'auto',
     id = '',
     cls = '',
     getAuthorPage = getAuthorPageUrl,
@@ -63,7 +63,7 @@
     updated,
   }: Props = $props();
 
-  let alignmentClass = $derived(align === 'left' ? 'text-left' : 'text-center');
+  let alignmentClass = $derived(align === 'center' ? 'text-center' : '');
 
   /**
   /* Date validation and formatter functions

package/dist/components/Byline/Byline.svelte.d.ts

@@ -15,7 +15,7 @@ interface Props {
     /**
      * Alignment of the byline.
      */
-    align?: 'left' | 'center';
+    align?: 'auto' | 'center';
     /**
      * Add an id to to target with custom CSS.
      * @type {string}

package/dist/components/EndNotes/EndNotes.svelte

@@ -47,13 +47,13 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   color: var(--theme-colour-text-primary);
   font-weight: 500;
   letter-spacing: 0em;
-  margin-top: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
-  margin-bottom: 0.125rem;
+  margin-block-start: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
+  margin-block-end: 0.125rem;
   text-transform: none;
 }
 
@@ -63,7 +63,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-  margin-top: 0;
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
 }</style>

package/dist/components/Framer/Resizer/index.svelte

@@ -165,7 +165,7 @@
   background-color: rgba(255, 255, 255, 0.8);
   padding: 4px 8px;
   border-radius: 4px;
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 #resizer button.icon {
   font-size: 14px;
@@ -196,10 +196,10 @@
 }
 #resizer button.icon.left {
   text-align: right;
-  padding-right: 3px;
+  padding-inline-end: 3px;
 }
 #resizer button.icon.right {
-  padding-left: 6px;
+  padding-inline-start: 6px;
   text-align: left;
 }
 #resizer div.slider-container {

package/dist/components/Framer/Typeahead/index.svelte

@@ -354,7 +354,7 @@ li:hover {
 }
 
 :global([data-svelte-search] label) {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
   display: inline-flex;
   font-size: 0.75rem;
   color: #aaa;

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -138,8 +138,8 @@ div.container {
   display: contents;
 }
 div.container :global(.article-block.graphic p) {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);
@@ -152,8 +152,8 @@ div.container :global(.article-block.graphic aside p) {
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
 }</style>

package/dist/components/Headline/Headline.svelte

@@ -155,9 +155,9 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   max-width: 660px;
 }
 .headline-wrapper :global(.dek p) {
-  margin-top: 0;
+  margin-block-start: 0;
   font-family: var(--theme-font-family-note);
   line-height: 1.3;
   font-weight: 300;
-  margin-bottom: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
+  margin-block-end: clamp(0.88rem, 0.83rem + 0.21vw, 1rem);
 }</style>

package/dist/components/HeroHeadline/HeroHeadline.mdx

@@ -51,7 +51,7 @@ In the graphics kit, set styles in `global.scss` to make the Reuters site header
   border: none !important;
 }
 .hero-wrapper {
-  margin-top: -64px;
+  margin-block-start: -64px;
 }
 ```
 
@@ -316,7 +316,7 @@ Add styles in `global.scss`:
   }
 
   .dek {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
     p {
       color: #ffffff;
       text-shadow: 1px 1px 8px #ff7c88;

package/dist/components/HeroHeadline/HeroHeadline.stories.svelte

@@ -243,7 +243,7 @@
   filter: drop-shadow(0px 0px 12px #ff7c88);
 }
 .custom-hed .dek {
-  margin-top: 1rem;
+  margin-block-start: 1rem;
 }
 .custom-hed .dek p {
   color: #ffffff;
@@ -260,5 +260,5 @@
   border: none !important;
 }
 .transparent-header :global(.hero-wrapper) {
-  margin-top: -64px;
+  margin-block-start: -64px;
 }</style>

package/dist/components/HeroHeadline/HeroHeadline.svelte

@@ -200,7 +200,7 @@
         {getAuthorPage}
         {published}
         {updated}
-        align="left"
+        align="auto"
       />
     {/if}
   </div>
@@ -230,7 +230,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   height: var(--heroHeight, 100svh);
   max-height: 1800px;
   transform: translateX(-50%);
-  margin-top: 0;
+  margin-block-start: 0;
 }
 @media (max-width: 690px) {
   .hero-wrapper :global(.background-hero .headline) {
@@ -243,8 +243,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .hero-wrapper :global(.background-hero video) {
   position: relative;
@@ -257,7 +257,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   .hero-wrapper :global(.graphic-container .article-block.notes) {
     width: 100%;
     padding: 0 15px;
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
 

package/dist/components/InfoBox/InfoBox.svelte

@@ -124,14 +124,14 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-weight: 600;
   letter-spacing: 0.03em;
   text-transform: uppercase;
-  margin-top: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
-  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block-start: clamp(1.13rem, 1.06rem + 0.31vw, 1.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 .infobox :global(.body p) {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);
@@ -140,29 +140,29 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-weight: 300;
 }
 .infobox :global(.body p):last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .infobox :global(.body ul),
 .infobox :global(.body ol) {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);
   line-height: 1.3;
   font-size: var(--theme-font-size-sm);
   font-weight: 300;
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .infobox :global(.body ul li),
 .infobox :global(.body ol li) {
-  margin-top: 0;
-  margin-top: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-start: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .infobox :global(.body ul li):last-child,
 .infobox :global(.body ol li):last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .infobox :global(.footer p) {
   font-family: var(--theme-font-family-note);
@@ -170,9 +170,9 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .infobox :global(.footer p):last-child {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }</style>

package/dist/components/PhotoPack/PhotoPack.svelte

@@ -85,7 +85,7 @@
       <div
         class="photopack-row flex justify-between"
         style:gap="0 {gap}px"
-        style:margin-bottom={ri < rows.length - 1 ? gap + 'px' : ''}
+        style:margin-block-end={ri < rows.length - 1 ? gap + 'px' : ''}
       >
         {#each row as img, i}
           <figure
@@ -143,6 +143,6 @@ div.photopack-container div.photopack-row figure div.alt-warning {
   font-size: var(--theme-font-size-xs);
   line-height: 1.3;
   font-weight: 400;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }</style>

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -189,7 +189,7 @@ div.block-container.stacked {
 }
 
 div.heading {
-  margin-top: 0;
+  margin-block-start: 0;
   font-family: Knowledge, sans-serif;
 }
 div.heading.stacked {
@@ -212,8 +212,8 @@ div.heading.stacked {
   display: block;
   width: calc(50% - 30px);
   max-width: 450px;
-  margin-top: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
-  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
 }
 .referral-container .referral:hover .title {
   text-decoration: underline;
@@ -224,7 +224,7 @@ div.heading.stacked {
 .referral-container .referral .headline {
   display: inline-block;
   width: calc(100% - 9rem);
-  padding-right: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  padding-inline-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
 }
 .referral-container .referral .headline .kicker {
   font-size: var(--theme-font-size-xxs);

package/dist/components/Scroller/Embedded/Foreground.svelte

@@ -40,5 +40,5 @@
 {/if}
 
 <style>div.embedded-foreground :global(p:last-child) {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }</style>

package/dist/components/Scroller/Foreground.svelte

@@ -59,8 +59,8 @@ div.step-foreground-container .step-foreground {
   background: rgba(255, 255, 255, 0.9);
 }
 div.step-foreground-container .step-foreground :global(p:last-child) {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 div.step-foreground-container .step-foreground :global(*:first-child) {
-  margin-top: 0;
+  margin-block-start: 0;
 }</style>

package/dist/components/SearchInput/SearchInput.svelte

@@ -62,8 +62,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   width: 250px;
 }
 .search .search--icon {
-  left: 0.5rem;
-  top: 0.55rem;
+  inset-inline-start: 0.5rem;
+  inset-block-start: 0.55rem;
   width: 1.5rem;
   height: 1.5rem;
   fill: var(--theme-colour-brand-rules);
@@ -76,8 +76,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   width: 100%;
 }
 .search .search--x {
-  right: 0;
-  top: 0.55rem;
+  inset-inline-end: 0;
+  inset-block-start: 0.55rem;
   width: 1.5rem;
   height: 1.5rem;
   fill: var(--theme-colour-text-primary);

package/dist/components/SimpleTimeline/SimpleTimeline.svelte

@@ -99,19 +99,19 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 */
 /* Scales by 1.125 */
 .timeline .date {
-  border-left: 1px solid var(--symbol-colour);
+  border-inline-start: 1px solid var(--symbol-colour);
 }
 .timeline .date:last-child {
-  border-left: 1px solid var(--theme-colour-background);
-  padding-bottom: 0;
+  border-inline-start: 1px solid var(--theme-colour-background);
+  padding-block-end: 0;
 }
 .timeline svg {
-  top: -1px;
-  left: -10px;
+  inset-block-start: -1px;
+  inset-inline-start: -10px;
 }
 .timeline div.title {
-  margin-top: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
-  margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
+  margin-block-start: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-end: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);
   font-weight: 500;
 }
 .timeline div.event a {
@@ -127,8 +127,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   opacity: 0.8;
 }
 .timeline div.event :global(p) {
-  margin-top: 0;
-  margin-bottom: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
+  margin-block-start: 0;
+  margin-block-end: clamp(0.56rem, 0.52rem + 0.21vw, 0.69rem);
   font-family: var(--theme-font-family-note);
   font-size: calc(0.9 * var(--theme-font-size-base));
   color: var(--theme-colour-text-primary);

package/dist/components/SiteFooter/CompanyLinks.svelte

@@ -80,8 +80,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 
 .company {
-  padding-top: 24px;
-  padding-bottom: 24px;
+  padding-block-start: 24px;
+  padding-block-end: 24px;
   box-sizing: border-box;
 }
 .company .content-container {
@@ -114,25 +114,25 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   box-sizing: border-box;
 }
 .company .content-container {
-  padding-left: 2.2222222222vw;
+  padding-inline-start: 2.2222222222vw;
 }
 .company .content-container {
-  padding-right: 2.2222222222vw;
+  padding-inline-end: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
   .company .content-container {
-    padding-left: 4.2666666667vw;
+    padding-inline-start: 4.2666666667vw;
   }
   .company .content-container {
-    padding-right: 4.2666666667vw;
+    padding-inline-end: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .company .content-container {
-    padding-left: 32px;
+    padding-inline-start: 32px;
   }
   .company .content-container {
-    padding-right: 32px;
+    padding-inline-end: 32px;
   }
 }
 
@@ -179,17 +179,17 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   list-style: none;
   display: inline-block;
   vertical-align: middle;
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 .symbol:first-child {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 
 section.company {
   max-width: 100%;
 }
 section.company h2 {
-  margin-bottom: 12px;
+  margin-block-end: 12px;
   line-height: 1.333;
   font-size: 16px;
   color: var(--nav-primary);