.container {
    background-color: #111;
    box-shadow: 0 1px 2px #111;
    text-shadow: 0 1px 4px #111;

    // should this exist?
    &--hidden { // __title should always be the first element of a container
        :not(:first-child) {
            display: none;
        }
    }

    &--translucent {
        background-color: #111E;
    }

    &__title {
        display: block;
        text-decoration: none;
        background-image: linear-gradient(0deg, transparent, var(--accent-colour));
        color: #fff;
        font-size: 1.5em;
        line-height: 1.5em;
        padding: 8px 10px;
        word-wrap: break-word;
        overflow: hidden;

        &--link:hover {
            text-decoration: underline;
        }

        &__link {
            color: inherit;
            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    &__content { // only use this for text going forward, just throw your child container in directly after __title
        margin: 0;
        padding: 2px 5px;
    }
}