/** Tutorials -- Archive **/
.tutorials{
    &__container{
        position:relative;
        padding-top:12px;
        padding-bottom:48px;
        @include media-min($sm){
            padding-top:24px;
            padding-bottom:72px;
        }
        @include media-min($lg){
            padding-bottom:120px;
        }
    }
    &__intro{
        margin-bottom:36px;
        @include media-min($sm){
            margin-bottom:48px;
        }
        @include media-min($lg){
            margin-bottom:54px;
        }
        &-title{
            margin-bottom:.375em;
            font-weight:600;
        }
    }
    &__archive{
        margin:0 -18px;
        @include media-min($lg){
            margin:0 -24px;
        }
    }
    &__post{
        display:flex;
        &-thumbnail{
            position:relative;
            margin:0;
            overflow:hidden;
            &-img{
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }
        }
        &-permalink{
            color:inherit;
            text-decoration:none;
        }
        &-title{
            margin-bottom:8px;
            font-weight:600;
            @include media-min($sm){
                margin-bottom:12px;
            }
        }
        &-link{
            display:inline-block;
            color:$yellow;
            font-weight:600;
            font-size:1em;
            font-family:$mainFont;
            text-decoration:none;
            &::after{
                display:inline-block;
                vertical-align:-7px;
                content:"arrow_right";
                @include material-icons(24px);
            }
        }
        &--featured{
            flex-direction:column;
            width:100%;
            margin:0 18px 48px 18px;
            @include media-min($sm){
                width:calc(50% - 36px);
                margin:0 18px 64px 18px;
                padding-bottom:36px;
                border-bottom:1px solid rgba($black,.12);
            }
            @include media-min($lg){
                width:calc(50% - 48px);
                margin:0 24px 64px 24px;
            }
        }
        &--featured &-thumbnail{
            height:210px;
            margin-bottom:27px;
            border-radius:12px;
            @include media-min($lg){
                height:270px;
            }
            @include media-min($xxl){
                height:320px;
            }
            &-img{
                width:auto;
                max-width:100%;
                height:auto;
            }
        }
        &--featured &-excerpt{
            margin-bottom:18px;
        }
        &--archive{
            flex-direction:row;
            align-items:center;
            width:100%;
            margin:0 18px 27px 18px;
            @include media-min($sm){
                margin:0 18px 36px 18px;
            }
            @include media-min($lg){
                width:calc(50% - 48px);
                margin:0 24px 36px 24px;
            }
        }
        &--archive &-thumbnail{
            min-width:45%;
            height:150px;
            margin-right:24px;
            border-radius:8px;
            @include media-min($sm){
                min-width:33.3%;
                height:100%;
                margin-right:36px;
            }
            @include media-min($lg){
                min-width:40%;
                border-radius:10px;
            }
            @include media-min($xxl){
                min-width:33.3%;
            }
            &-img{
                width:auto;
                height:100%
            }
        }
        &--archive &-content{
            @include media-min($sm){
                padding:18px 0;
            }
        }
        &--archive &-title{
            @include media-min($sm){
                margin-bottom:6px;
            }
        }
        &--archive &-excerpt{
            display:none;
            @include media-min($sm){
                display:block;
                margin-bottom:12px;
                font-size:16px;
                line-height:28px;
            }
        }
    }
}
    
/** Dark mode styles **/
body.dark-mode .tutorials{
    &__post{
        &--featured{
            @include media-min($sm){
                border-bottom:1px solid rgba($white,.12);
            }
        }
    }
}