.container {
    // todo: make this now bad
    background-image: linear-gradient(0deg, var(--background-colour-translucent), var(--background-colour-translucent));
    background-color: var(--accent-colour);

    box-shadow: 0 1px 2px #000A;
    text-shadow: 0 1px 4px #000;

    // this should probably be default behaviour
    &--no-overflow {
        overflow: hidden;
        word-wrap: break-word;
    }

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

    &__title {
        display: block;
        overflow: hidden;

        &__text {
            font-size: 1.5em;
            line-height: 1.5em;
            padding: 8px 10px;
            word-wrap: break-word;
        }

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

            &:hover {
                color: var(--accent-colour);
            }
        }

        &__background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
            -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
            background: var(--background-pattern);
            background-color: var(--accent-colour);
            background-blend-mode: multiply;
        }
    }

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