@import 'variables';

.logounit {
    display: block;
}

.logo {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: $brand-grey-light;
    margin-bottom: $spacer / 2;
    margin-left: auto;
    margin-right: auto;
}

.title,
.description {
    display: inline-block;
    margin-bottom: 0;
}

.title {
    font-size: $font-size-h3;
    margin-right: $spacer / 4;
    color: $brand-main;
    line-height: $line-height;
}

.description {
    font-size: $font-size-h4;
    color: $brand-grey-light;

    &::before,
    &::after {
        opacity: .4;
    }

    &::before {
        content: '{ ';
    }

    &::after {
        content: ' }';
    }
}

.minimal {
    transform: scale(.7);
    transform-origin: top center;
    transform-box: border-box;

    .title,
    .description {
        color: $text-color-light;

        :global(.dark) & {
            color: $text-color-light--dark;
        }
    }

    .logo {
        margin-bottom: $spacer / 3;
        opacity: .5;
    }
}
