studypress-new-design/css/blog-single.sass

@import ./themeStyle

section
    padding: 2rem 0 1.5rem


.page-title
    font-family: $fontInter
    margin-top: 2.5rem
    text-align: left
    font-weight: 600
    padding-bottom: 1.5rem
    border-bottom: 3px solid $thirdColor
    strong
        color: $primaryColor


// item-details
.item-details
    padding-bottom: 2rem
    font-family: $fontNotoBangla

    .item-title
        font-size: 1.5rem 
        font-weight: 500 
        margin-bottom: .25rem
        line-height: 1.4

    .item-date
        font-size: .7rem
        color: $greyColor
        margin-bottom: .5rem

    .social-links
        display: flex
        align-items: center
        gap: .5rem

        a
            color: $greyColor
            font-size: 1rem
            &:hover
                transform: scale(1.1)

    .img-container
        margin: 1.5rem 0

    .item-details
        line-height: 1.7
        color: $greyColor


// related-items
#related-items
    font-family: $fontNotoBangla

    .sec-title
        font-weight: 500

    .single-item
        display: flex
        flex-direction: column
        gap: .25rem

        .img-container
            height: 150px

        .details
            padding-top: .35rem
            
            .title
                display: block
                font-size: .8rem
                font-weight: 600
                line-height: 1.4
                color: $blackColor
                text-decoration: none
                &:hover
                    opacity: .7
        




// side-section
#side-section
    padding-top: 0
    display: flex
    flex-direction: column
    gap: 1.5rem

    .side-item-title
        background-color: $thirdColor
        color: $blackColor
        text-align: left
        margin-bottom: .5rem
        padding: .25rem .75rem
        font-size: 1rem

    .single-item
        display: flex
        padding-bottom: .75rem
        border-bottom: 2px solid $thirdColor

        .img-container
            flex: 2 

            img
                width: 100%

        .details
            flex: 4
            padding: .25rem .75rem

            .title
                display: block
                font-size: .8rem
                line-height: 1.4
                color: $blackColor
                font-weight: 500
                text-decoration: none
                &:hover
                    opacity: .8


    .single-testimonial
        display: flex
        padding-bottom: .75rem
        border-bottom: 2px solid $thirdColor

        .img-container
            flex: 2 

            img
                width: 100%

        .details
            flex: 4
            padding: .25rem .75rem

            .testimonial
                display: block
                font-size: .65rem
                line-height: 1.2
                color: $greyColor
                font-weight: 500
                text-decoration: none
            
            .name, .ocupation
                margin: unset
                margin-top: .15rem
                font-weight: 500
                font-size: .7rem
                text-align: right



// add container
.add-container
    width: 100%