@use '../utils' as *;

/*=============================
    06. Featured Post
===============================*/
.featured {
    &__post {
        @include flexbox();
        align-items: center;
        margin: 0 0 35px;
        & .tgbanner__content-meta {
            margin: 0 0 7px;
        }
        @media #{$lg} {
            display: block;
        }
        @media #{$md} {
            margin-right: 35px;
        }
        @media #{$xs} {
            margin-right: 0;
        }
    }
    &__thumb {
        width: 100px;
        height: 100px;
        flex: 0 0 auto;
        @include flexbox();
        align-items: center;
        justify-content: center;
        background-position: center;
        background-size: cover;
        @include border-radius(50%);
        font-size: 30px;
        font-weight: var(--tg-fw-bold);
        color: var(--tg-common-color-white);
        letter-spacing: -2px;
        position: relative;
        margin-right: 20px;
        z-index: 1;
        @media #{$lg} {
            margin: 0 0 15px;
        }
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            @include border-radius(50%);
            background: var(--tg-theme-secondary);
            @include transition(.4s);
            opacity: .3;
            z-index: -1;
        }
    }
    &__content {
        & .title {
            margin: 0 0;
            font-size: 20px;
            line-height: 1.4;
            @media #{$sm} {
                font-size: 18px;
            }
        }
    }
    &__post {
        &:hover {
            & .featured__thumb {
                &::before {
                    opacity: 0;
                }
            }
        }
    }
}
.recent-post-area {
    & .featured__thumb {
        @include border-radius(0);
        margin-right: 0;
        &::before {
            opacity: 0;
            @include border-radius(0);
        }
    }
    & .featured__post {
        & > a {
            display: block;
            margin-right: 30px;
        }
        &:hover {
            .featured__thumb {
                &::before {
                    opacity: 0.4;
                }
            }
        }
    }
    & .featured__content .title {
        margin: 0 0 18px;
    }
}