@layer components {
  .brand-logo {
    display: inline-block;
    inline-size: var(--logo-size);
    aspect-ratio: 1 / 1;
    background-color: transparent;
    position: relative;

    &::after {
      content: '';
      display: block;
      position: absolute;
      inset: 0;
      background-color: var(--color-brand-navy);
      -webkit-mask-image: url("/assets/logo-sakolabs-3850fb2c.svg");
      mask-image: url("/assets/logo-sakolabs-3850fb2c.svg");
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
    }
  }
}