@use '../../root' as *;
@use '../../utilities' as *;

.blog3 {
    &-card {
        border-radius: 10px;
        background: $bg-color;
        margin-bottom: 40px;
        &__thumb {
            border-radius: 20px;
            img {
                border-radius: 20px;
            }
        }
        &-content {
            padding: 0 40px 40px;
            @include breakpoint (max-md) {
                padding: 30px;
            }
            &-meta {
                display: flex;
                align-items: center;
                gap: 18px;
                padding-top: 30px;
                padding-bottom: 11px;
                color: rgba(31, 31, 31, 0.60);
                font-family: $body-font;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 26px; /* 162.5% */
                @include breakpoint (max-xxl) {
                    gap: 15px;
                }
                @include breakpoint (max-md) {
                    gap: 10px;
                    padding-top: 0px;
                }
                @include breakpoint (max-sm) {
                    flex-wrap: wrap;
                    row-gap: 10px;
                }
                img {
                    padding-right: 6px;
                }
                &__user {
                    display: flex;
                    align-items: center;
                    gap: 7px;
                    @include breakpoint (max-xl) {
                        display: none;
                    }
                }
                &__care {
                    display: flex;
                    align-items: center;
                    gap: 7px;
                }
                &__calendar {
                    display: flex;
                    align-items: center;
                    gap: 7px;
                }
                &__comment {
                    display: flex;
                    align-items: center;
                    gap: 7px;
                }
            }
            &__title{
                padding-bottom: 15px;
                h5 {
                    color: $title-color;
                    font-family: $body-font;
                    font-size: 30px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 38px; /* 126.667% */
                    @include breakpoint (max-sm){
                        font-size: 28px;
                    }
                }
            }
            &__desc {
                padding-right: 5px;    
                p {
                    color: $title-color;
                    font-family: $body-font;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 26px;
                    opacity: 0.7;
                }            
            }
        }
        &__quote {
            margin-bottom: 40px;
            text-align: center;
            padding: 50px 50px;
            border-radius: 10px;
            background: #EBF3ED;
            @include breakpoint (max-xs){
                padding: 25px 28px 50px;
            }
            img {
                padding-bottom: 21px;
            }
            p {
                color: #1F1F1F;
                text-align: center;
                font-family: Roboto;
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 28px; 
                padding-bottom: 32px;
                opacity: 0.7;
            }
            h4 {
                color: #1F1F1F;
                font-family: Roboto;
                font-size: 24px;
                font-style: normal;
                font-weight: 500;
                line-height: 34px; 
            }
        }
    }
}
