// Demo modificators
.-color-red {color:red;}
.-color-green {color:#51c67d;}

.cb-demo {
    $root:&;

    background:$color-base;

    &-content {
        display:flex;
        align-items:center;
        justify-content:center;
        height:100vh;
    }

    &-container {
        padding:0 20px;

        @media (min-width:$screen-xl-min) {
            padding:0 120px;
        }
    }

    &-row {
        display:flex;
        justify-content:center;
        text-align:center;
        margin:30px 0;

        @media (min-width:$screen-xl-min) {
            margin:60px 0;
        }
    }

    &-item {
        position:relative;

        flex:1;
        padding:50px 30px;
        margin:0 20px;

        color:$color-text;

        @media (min-width:$screen-xl-min) {
            padding:90px 30px;
            margin:0 30px;
        }

        &-title {
            position:relative;
            margin:0 0 25px 0;

            font-size:30px;
            font-weight:bold;
        }

        &-text {
            position:relative;
            max-width:70%;
            margin:0 auto;

            color:rgba($color-text, 0.5);

            font-size:16px;
            font-weight:300;
            line-height:150%;
        }

        &:before {
            content:"";
            display:block;
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;

            border-radius:30px;
            background:#f8f8f8;

            transition:box-shadow 0.2s;
        }
    }
}