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

@layer components {
    .component--branding {
        --logo-width: 7.75rem;
        --logo-height: 5.875rem;
    }
    .branding {
    }
    .branding__link {
        text-decoration: none;
        display: grid;
        grid-template-columns: min-content 1fr;
        gap: var(--size-gap);
    }
    .branding__title-and-tagline {
        margin: 0;
    }
    .branding__title {
        font-weight: var(--font-weight-light);
    }
    .branding__title b {
        font-weight: var(--font-weight-bold);
    }
    .branding__tagline {
        font-weight: var(--font-weight-light);
    }
    @media (max-width: 680px) {
        .branding__link {
            gap: var(--spacing-s);
        }
        .branding__tagline {
            font-size: 12px;
            line-height: 1.1;
        }
        .branding__figure {
            height: 56px;
            width: 75px;
        }
        .branding__title-and-tagline {
            place-self: center start;
        }
    }
    @media (min-width: 640px) {
        .branding__tagline {
        }
        .branding__link {
        }

        .branding__figure {
            grid-column: 1;
            align-self: center;
            display: flex;
            margin-left: auto;
            width: var(--logo-width);
            height: var(--logo-height);
            margin-bottom: -1.25rem;
        }
        .branding__title-and-tagline {
            grid-column: 2;
            align-self: end;
        }
        .branding__title {
            font-size: var(--font-size-l);
            font-size: 4.5cqi;
        }

        .branding__tagline {
            font-size: 2.5cqi;
        }
    }
    @media (min-width: 640px) and (max-width: 980px) {
        .branding__title {
            font-size: 3.5cqi;
        }
        .branding__tagline {
            font-size: 2cqi;
            margin-bottom: var(--spacing-xs);
        }
    }

    @media (min-width: 980px) {
        .branding__title {
            font-size: 1.625rem;
            line-height: calc(22 / 26);
        }
        .branding__tagline {
            font-size: var(--font-size-l);
            line-height: var(--line-height-l);
            margin-top: var(--spacing-xs);
        }
    }
}