.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--header);
    position: relative;

    &_highlight {
        background: var(--accent);
        color: var(--header-light);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo_img {
        height: 2.5rem;
        width: auto;
        //width: 85%;
        //height: auto;
    }
    .logo_img_m{
        width: auto;
        height: 1.94rem;
        //@media screen and (max-width: 380px) {
        //    height: 1.94rem;
        //}
        //@media screen and (max-width: 350px) {
        //    height: 1.94rem;
        //}
    }
    .logo_img_m_xl{
        width: auto;
        height: 2.7rem;
    }

    &.sm {
        font-size: 19px;
        gap: 4px;

        .logo_highlight {
            padding: 4px;
            border-radius: 4px;

            span {
                margin-top: -2px;
            }
        }
    }

    &.md {
        font-size: 28px;

        .logo_highlight {
            padding: 0 8px;
            border-radius: 8px;
            height: 33px;

            span {
                margin-top: -4px;
            }
        }
    }

    &.xl {
        font-size: 28px;

        .logo_highlight {
            padding: 0 8px;
            border-radius: 8px;
            height: 33px;

            span {
                margin-top: -4px;
            }
        }
    }
}