/** Tutorial – Content **/ .tutorial{

&__content{
    width:100%;
    @include media-min($lg){
        width:calc(50% - 24px);
        margin:0 auto 0 0;
    }
    @include media-min($xxl){
        width:calc(40% - 24px);
    }
}
&__intro{
    margin-bottom:36px;
    padding-bottom:27px;
    border-bottom:1px solid rgba($black,.12);
    @include media-min($sm){
        margin-bottom:48px;
        padding-bottom:36px;
    }
    &-link{
        display:inline-block;
        color:$yellow;
        font-weight:600;
        font-size:.888em;
        font-family:$mainFont;
        line-height:150%;
        text-decoration:none;
        &::before{
            margin-left:-7px;
            font-size:24px;
            line-height:1;
            vertical-align:-7px;
            content:"arrow_left";
            @include material-icons(24px);
        }
    }
}
&__title{
    margin:.25em 0 .375em 0;
    color:$black;
    font-weight:600;
    font-size:1.5em;
    @include media-min($sm){
        font-size:1.77em;
    }
}
&__description{
    margin:0;
}
&__buttons{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    margin-top:27px;
    @include media-min($xxl){
        margin-top:36px;
    }
    .btn{
        margin-right:12px;
        margin-bottom:8px;
        @include media-min($xxl){
            margin-bottom:0;
        }
    }
}
/** Case study -- Entry content **/
&__text{
    h1{
        margin:0 0 .25em 0;
        color:$black;
        font-weight:600;
        font-size:1.5em;
        @include media-min($sm){
            font-size:1.77em;
        }
    }
    h2{
        margin:1.5em 0 .25em 0;
        padding:0 36px;
        font-weight:600;
        font-size:1.3125em;
        line-height:135%;
        @include media-min($sm){
            margin:2em 0 .25em 0;
            font-size:1.33em;
        }
        &:first-of-type{
            margin-top:1em;
        }
        &::before{
            display:inline-block;
            width:24px;
            height:24px;
            margin:0 12px 0 -36px;
            padding:4px 0;
            color:$white;
            font-weight:700;
            font-size:16px;
            line-height:1;
            text-align:center;
            vertical-align:3px;
            background:$yellow;
            border-radius:50%;
            content:attr(data-count);
        }
    }
    h3, h4{
        margin:1.5em 0 1em 0;
        font-weight:600;
        font-size:1em;
        @include media-min($sm){
            font-size:1.166em;
        }
    }
    p{
        margin:0;
        padding:21px 36px 27px 33px;
        font-size:14px;
        line-height:24px;
        border-bottom:1px solid rgba($black,.12);
        border-left:3px solid transparent;
        cursor:pointer;
        @include transition(.25s ease-in-out);
        @include media-min($sm){
            font-size:16px;
            line-height:28px;
        }
        &:last-of-type{
            border-bottom:0;
        }
        &:hover{
            border-left-color:$lightGrey;
        }
        &.highlight{
            border-left-color:$yellow;
        }
        &.highlight strong{
            color:rgba($black,.87);
        }
    }
    a{
        color:$blue;
        font-weight:600;
        text-decoration:none;
        &:hover{
            text-decoration:underline;
        }
    }
    img{
        max-width:100%;
        height:auto;
        margin-top:1em;
    }
    strong{
        display:block;
        margin-bottom:.25em;
    }
    ul{
        margin:24px 0;
        padding:0 0 0 30px;
        list-style-type:none;
        li{
            margin:0 0 8px 0;
            font-size:14px;
            line-height:24px;
            @include media-min($sm){
                margin:0 0 12px 0;
                font-size:16px;
                line-height:28px;
            }
        }
        li::before{
            @include material-icons(24px);
            margin:0 6px 0 -30px;
            color:rgba($black,.38);
            vertical-align:-7px;
            content:"chevron_right";
        }
    }
}

}

/** Dark mode styles **/ body.dark-mode .tutorial{

&__intro{
    border-color:rgba($white,.12);
}
&__text{
    p{
        border-bottom:1px solid rgba($white,.12);
        &:hover{
            border-left-color:rgba($white,.38);
        }
        &.highlight strong{
            color:rgba($white,.87);
        }
    }
    a{
        color:$yellow;
    }
    li::before{
        color:rgba($white,.38);
    }
}

}