/** Tutorial -- Content **/
.tutorial{
    &__content{
        width:100%;
        @include min-lg{
            width:calc(50% - 24px);
            margin:0 auto 0 0;
        }
        @include min-xxl{
            width:calc(40% - 24px);
        }
    }
    &__intro{
        margin-bottom:36px;
        padding-bottom:27px;
        border-bottom:1px solid rgba($black,.12);
        @include 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;
            }
        }
    }
    &__title{
        margin:.25em 0 .375em 0;
        color:$black;
        font-weight:600;
        font-size:1.5em;
        @include min-sm{
            font-size:1.77em;
        }
    }
    &__description{
        margin:0;
    }
    &__buttons{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        margin-top:27px;
        @include min-xxl{
            margin-top:36px;
        }
        .btn{
            margin-right:12px;
            margin-bottom:8px;
            @include 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 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 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 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 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 min-sm{
                    margin:0 0 12px 0;
                    font-size:16px;
                    line-height:28px;
                }
            }
            li::before{
                @include material-icons;
                margin:0 6px 0 -30px;
                color:rgba($black,.38);
                font-size:24px;
                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);
        }
    }
}