misuzu/assets/less/container.less

.container {
    background-color: @container-colour;
    background-color: var(--container-colour);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 4px #000;
    overflow: hidden;
    word-wrap: break-word;

    &--lazy {
        margin-bottom: 2px;
    }

    &__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: @accent-colour;
                color: var(--accent-colour);
            }
        }

        &__background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
            -webkit-mask-image: linear-gradient(0deg, transparent 10%, @background-colour 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: @background-pattern;
            background: var(--background-pattern);
            background-color: @accent-colour;
            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;
    }
}