.container {
    border: 1px solid #9475b2;
    background-color: #fbeeff;
    margin: 2px 0;
    box-shadow: 0 1px 2px #9475b2;

    .main--dark & {
        background-color: #23172a;
    }

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

    &__title {
        display: block;
        text-decoration: none;
        background-color: #9475b2;
        color: #306;
        font-size: 1.17em;
        font-weight: 700;
        padding: 3px;
        font-family: @mio-font-heading;
        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: 2px 5px;
    }
}