@layer components {
    div.studio-brand {
        max-width: 200px;
        display: grid;
        align-items: center;
        overflow-y: hidden;

        & div.studio-logo {
            height: 100%;
            max-height: 5.25rem;
            max-width: 100%;
            flex-shrink: 1;
            flex-grow: 1;
            width: 300px;
            align-self: stretch;

            &.colorized {
                background-color: var(--color--brand);

                mask-size: contain;
                mask-repeat: no-repeat;
                mask-position: center;
                mask-image: var(--image--studio-logo);
            }

            &:not(.colorized) {
                background-image: var(--image--studio-logo);

                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }

    @media screen and (min-width: 1000px) {
        div.studio-brand {
            max-width: 300px;
            height: 5.25rem;
        }
    }
}