

.blog-section{
    padding-top: clamp(20px, 4vw, 40px);
    padding-bottom: clamp(40px, 8vw, 80px);
    &__box{
        display: flex;
        gap: clamp(24px, 4.533vw, 60px);
    }

    .blog-image{
        min-width: 580px;
        max-width: 580px;
        img{
            width: 100%;
        }
    }

    .blog-content{
        display: grid;
        align-content: center;
        gap: clamp(10px, 2vw, 20px);

        p{
            font-family: var(--font-family);
            font-weight: 400;
            font-size: clamp(16px, 2.4vw, 20px);
            line-height: 140%;
            letter-spacing: 0.01em;
            color: var(--colors-default);

            padding: 10px 0;
        }
    }

    @include desktop {
        .blog-image{
            min-width: 420px;
            max-width: 420px;
        }
    }

    @include tablet{
        &__box{
            flex-direction: column;
        }

        .blog-image{
            min-width: 100%;
            max-width: 100%;
            img{
                width: 100%;
            }
        }
    
        .blog-content{
            p{
                font-size: clamp(16px, 2.4vw, 20px);
                padding: 10px 0;
            }
        }
    }

}


.popular-blog{
    padding: clamp(40px, 8vw, 80px) 0;
    .title-main{
        color: var(--colors-default);
    }

    .swiper-slide-active{
        position: relative;

        @media (min-width: 1200px) {
            &::after{
                display: block;
                content: '';
                width: 1px;
                height: 100%;
                background-color: var(--colors-primary);
                position: absolute;
                top: 0;
                right: -70px;
    
                @media (max-width: 1300px) {
                    right: -35px;
                }
            }
        }
    }

    .blogslider-next,
    .blogslider-prev {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--colors-default);
        z-index: 10;
        cursor: pointer;
        transition: 0.23s;

        &:hover {
            opacity: 0.9;
        }
    }

    @include sm-mobile {
        padding-bottom: 100px;
        position: relative;
        .reviews__nav{
            display: flex !important;
            position: absolute;
            bottom: 20px;
            width: 100%;
            left: 0;
            right: 0;
            justify-content: center;
        }
    }

}

.blog-card{
    display: flex;
    gap: clamp(20px, 4vw, 40px);
    padding: 12.5px 0;

    &__image{
        overflow: hidden;
        min-width: 280px;
        max-width: 280px;
 
        img{
            transform: scale(1);
            transition: 0.37s;
        }
        &:hover{
            img{
                transform: scale(1.08);
            }       
        }

        @media (max-width: 1300px) {
            // min-width: 220px;
            // max-width: 220px;
            // min-height: 220px;
            // max-height: 220px;
        }

    }

    &__content{
        display: grid;
        align-content: center;
        gap: 10px;
    }

    &__title{
        a{
            font-family: var(--font-family);
            font-weight: 700;
            font-size: 20px;
            line-height: 140%;
            letter-spacing: 0.01em;
            color: var(--colors-default);
            transition: 0.23s;

            &:hover{
                color: var(--colors-primary);
            }    
        }
    }

    &__date{
        font-family: var(--font-family);
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 0.01em;
        color: var(--colors-grey2);
    }

    &__prevtext{
        font-family: var(--font-family);
        font-weight: 400;
        font-size: clamp(16px, 2.133vw, 20px);
        line-height: 140%;
        letter-spacing: 0.01em;
        color: var(--colors-default);
    }

    @include sm-mobile{
        flex-direction: column;

        &__image{
            min-width: 100%;
            max-width: 100%;
            img{
                width: 100%;
            }
        }
    }

}


.btn-link{
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--colors-primary);
    transition: 0.23s;

    &:hover{
        gap: 15px;
    }
}