/*  COMPONENT: BRANDING
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--branding {
    }
    .branding {
        padding: var(--spacing-m);
        margin-left: calc(var(--spacing-m) * -1);
        background-color: var(--color-white);
    }
    @media (max-width: 720px) {
        .branding {
            padding-block: 0;
        }
    }
    .branding .custom-logo-link {
        width: fit-content;
        height: 100%;
    }
    .branding .custom-logo-link img {
        transform: translateY(0);
        transition: transform 0.3s;
    }
    .branding .custom-logo-link:active img {
        transform: translateY(1px);
        transition: transform 0.3s;
    }
    .branding .custom-logo {
        height: 5rem;
        width: auto;
        transition: filter;
    }
    .branding .custom-logo-link:hover .custom-logo {
        filter: brightness(0);
        transition: filter;
    }
}