.title {
    font-family: var(--font-family-title);
    line-height: var(--line-height-title);
}

@media (min-width: 768px) {
    .title {
        line-height: var(--line-height-title-768);
    }
}

@media (min-width: 992px) {
    .title {
        line-height: var(--line-height-title-992);
    }
}

@media (min-width: 1200px) {
    .title {
        line-height: var(--line-height-title-1200);
    }
}

.title > * + * {
    margin-top: 10px;
}

.title .la {
    font-size: 1em;
    color: var(--colour-one);
}

.title__pre {
    color: var(--colour-one);
    text-transform: uppercase;
    opacity: 1;
}

.title__pre--image {
    display: inline-block;
}

    .title__pre--image .picture img {
        height: 28px !important;
    }

.title__main {
    color: var(--colour-title);
}

    .title__main a:hover {
        text-decoration: underline;
    }

.title__sub {
    margin-top: var(--sub-title-offset);
    color: var(--colour-sub-title);
}

.title__sub--space {
    margin-top: var(--spacing-internal);
}

.title--row {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
}

.title--bar {
    color: var(--colour-neutral);
    background-color: var(--colour-two);
    text-align: center;
    padding-top: calc(1 * var(--spacing-mobile));
    padding-bottom: calc(1 * var(--spacing-mobile));
}

@media (min-width: 768px) {
    .title--bar {
        padding-top: calc(1 * var(--spacing-tablet));
        padding-bottom: calc(1 * var(--spacing-tablet));
    }
}

@media (min-width: 992px) {
    .title--bar {
        padding-top: calc(1 * var(--spacing-desktop));
        padding-bottom: calc(1 * var(--spacing-desktop));
    }
}

@media (min-width: 1200px) {
    .title--bar {
        padding-top: calc(1 * var(--spacing-large));
        padding-bottom: calc(1 * var(--spacing-large));
    }
}

.title--bar .title__main,
.title--bar .title__sub {
    color: inherit;
}

.title--inherit-colour .title__main,
.title--inherit-colour .title__sub {
    color: inherit;
}

.title--align-center {
    text-align: center;
}

.title--align-right {
    text-align: right;
}