@layer components { .c-component-image { display: block; max-inline-size: 100%; inline-size: 100%; block-size: auto; object-fit: cover; } .c-component-image[hidden] { display: none; } .c-component-image--contain { object-fit: contain; } .c-component-image--square { aspect-ratio: 1; } .c-component-image--landscape { aspect-ratio: 4 / 3; } .c-component-image--portrait { aspect-ratio: 3 / 4; } }

@layer components {
  .c-component-image--logo { inline-size: var(--space-7); block-size: var(--space-7); object-fit: contain; flex: 0 0 auto; }
}