[class*=blog-container] {
    max-width: 1400px;
    margin: 0px auto;
}

.blog-page{
    padding: 0 20px;
}

.blog-headline{
    margin-top: 159px;
    width: 1360px;
}

.blog-headline-text{
    display: flex;
    flex-direction: column;
}

.blog-headline-text a{
    text-decoration: none;
    color: #333333;
}

.blog-headline-text .col-1 img{
    width: 20px;
}

.blog-headline-text .col-1{
    display: flex;
    flex-direction: row;
}

.blog-headline-text h1{
    font-family: 'Gilroy-Bold';
    font-size: 96px;
    line-height: 119px;
    margin-top: 61px;
    margin-bottom: 28px;
}

/* ------------------------ */

.blog-cases{
    width: max-content;
}

.blog-cases-col-1{
    display: flex;
    flex-direction: row;
    width: max-content;
}

.blog-cases-row-1{
    display: flex;
    width: 960px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    height: max-content;
    position: relative;
}

.blog-cases-row-1 a{
    text-decoration: none;
    color: #333333;
}

.blog-case-text .col-1{
    transition: 0.3s;
}

.blog-cases-row-1 a:hover .blog-case-text .col-1{
    transition: 0.3s;
    color: #916BEF;
}

.blog-case{
    display: none;
    position: relative;
    width: 460px;
    height: 504px;
    background: #FFFFFF;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
}

.purple-blog-case{
    background: #D5C3FF;
    border-radius: 30px 30px 0px 0px;
    height: 230px;
}

.white-blog-case{
    background: #FFFFFF;
    border-radius: 30px 30px 0px 0px;
    height: 230px;
}

.black-blog-case{
    background: #1F1F1F;
    border-radius: 30px 30px 0px 0px;
    height: 230px;
}

.blog-case-hashtag{
    border-radius: 30px;
    padding: 10px
    25px;
    width: max-content;
    background: #F6F6F6;
    font-size: 16px;
    line-height: 19px;
}

.purple-blog-case .blog-case-hashtag{
    background: #CCB7FF;
}

.white-blog-case .blog-case-hashtag{
    background: #F6F6F6;
}

.black-blog-case .blog-case-hashtag{
    background: #474747;
}

.blog-hashtag{
    padding: 40px;
}

.black-blog-case .blog-case-hashtag, .purple-blog-case .blog-case-hashtag{
    color: #FFFFFF;
}

.blog-case-text{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 214px;
    top: 250px;
    left: 40px;
    padding-right: 40px;
}

.blog-case-text .col-3{
    font-size: 16px;
    line-height: 20px;
}

.blog-textarea{
    max-width: 380px;
    min-width: 380px;
    overflow: hidden;
    outline: none;
    border: 0;
    resize: none;
    cursor: pointer;
}

.blog-textarea-fc{
    max-width: 880px;
    min-width: 880px;
}

.blog-cases-row-2{
    margin-left: 40px;
    margin-top: 15px;
    width: 360px;
    display: flex;
    flex-direction: column;
}

.blog-buttons-article{
    display: flex;
    flex-direction: column;
    width: max-content;
}

.blog-buttons-article a{
    text-decoration: none;
}

.blog-article-tab{
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;

    background: #F6F6F6;
    border-radius: 30px;
    width: max-content;
    padding: 10px
    25px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 19px;
    cursor: pointer;
    transition: 0.4s;
}

.blog-article-tab:hover{
    background: #916BEF;
    color: #F6F6F6;
    transition: 0.4s;
}

.blog-article-tab-active{
    background: #B89BFF;
    color: #FFFFFF;
}

.blog-news{
    margin-top: 60px;
    width: max-content;
}

.links-topical .topical-headline{
    margin-bottom: 20px;
}

.links-topical{
    display: flex;
    flex-direction: column;
    margin-top: 60px;
}

.links-topical .topical-tab .col-2{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 16px;
    line-height: 21px;
    margin-top: 10px
}

.topical-tabs a{
    text-decoration: none;
}

.links-topical .topical-tab{
    color: #333333;
    margin-bottom: 40px;
    cursor: pointer;
}

.links-topical .topical-tab:hover .col-1{
    color: #916BEF;
}

.blog-show {
    display: block;
}

.blog-show-fc{
    width: 960px;
    height: 554px;
}

.blog-hashtag-fc{
    height: 350px;
}

.blog-case-text-fc{
    height: 142px;
    top: 370px;
}


.blog-displayNone{
    position: absolute;
    display: none;
}

.blog-displayBlock{
    position: relative;
}

.blog-cases-row-news{
    display: flex;
    width: 960px;
    gap: 40px;
    flex-direction: row;
    flex-wrap: wrap;
    height: max-content;
}

.blog-cases-row-news a{
    text-decoration: none;
    color: #333333;
}
/* ------------------------- */

.blog-page .popular-services{
    margin-top: 280px;
}

.blog-page .request-block{
    margin-top: 192px;
    margin-bottom: 201px;
}

.pagination-block{
    position: absolute;
    top: 107%;
    left: 41%;
}

.page-numbers{
    display: flex;
    flex-direction: row;
    gap: 18px;
    font-size: 18px;
    align-items: center;
}

.pagination-active{
    background: #916BEF;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
    border-radius: 13px;
    padding: 6px 16px;
    color: #FFFFFF;
}

.tag-biznes .blog-buttons-article .blog-article-tab:nth-child(2), .tag-dizajn .blog-buttons-article .blog-article-tab:nth-child(3), .tag-kopirajting .blog-buttons-article .blog-article-tab:nth-child(4), .tag-marketing .blog-buttons-article .blog-article-tab:nth-child(5){
    background: #B89BFF;
    color: #FFFFFF;
}

.tag .blog-article-tab-active{
    background: #F6F6F6;
    color: inherit;
}

.tag .blog-buttons-article .blog-article-tab:hover{
    background: #916BEF;
    color: #F6F6F6;
    transition: 0.4s;
}

.background-color-blog-case:nth-child(3){
    background: #FFFFFF;
}


/* -------------------------- */


@media(max-width: 1919px){
    .blog-headline{
        margin-top: calc(113px + (159 - 113) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(968px + (1360 - 968) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-headline-text h1{
        font-size: calc(68px + (96 - 68) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(85px + (119 - 85) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(42px + (61 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(20px + (28 - 20) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .blog-headline-text .col-1 img{
        width: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ------------------------ */
    
    .blog-cases-row-1{
        width: calc(683px + (960 - 683) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        gap: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-case{
        width: calc(327px + (460 - 327) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(358px + (504 - 358) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .purple-blog-case{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        0px 
        0px;
        height: calc(163px + (230 - 163) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .white-blog-case{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        0px 
        0px;
        height: calc(163px + (230 - 163) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .black-blog-case{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        0px 
        0px;
        height: calc(163px + (230 - 163) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-case-hashtag{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ))
        calc(18px + (25 - 18) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(14px + (19 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-hashtag{
        padding: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-case-text{
        height: calc(152px + (214 - 152) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        top: calc(178px + (250 - 178) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        left: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding-right: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-case-text .col-3{
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-textarea{
        max-width: calc(270px + (380 - 270) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        min-width: calc(270px + (380 - 270) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-textarea-fc{
        max-width: calc(626px + (880 - 626) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        min-width: calc(626px + (880 - 626) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-cases-row-2{
        margin-left: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(9px + (15 - 9) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(256px + (360 - 256) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-article-tab{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ))
        calc(18px + (25 - 18) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(14px + (19 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-news{
        margin-top: calc(42px + (60 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .links-topical .topical-headline{
        margin-bottom: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .links-topical{
        margin-top: calc(42px + (60 - 42) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .links-topical .topical-tab .col-2{
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(15px + (21 - 15) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .links-topical .topical-tab{
        margin-bottom: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-show-fc{
        width: calc(683px + (960 - 683) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(393px + (554 - 393) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-hashtag-fc{
        height: calc(249px + (350 - 249) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-case-text-fc{
        height: calc(101px + (142 - 101) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        top: calc(263px + (370 - 263) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    
    .blog-cases-row-news{
        width: calc(683px + (960 - 683) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        gap: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ------------------------- */
    
    .blog-page .popular-services{
        margin-top: calc(197px + (280 - 197) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .blog-page .request-block{
        margin-top: calc(136px + (192 - 136) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(148px + (201 - 148) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .page-numbers{
        gap: calc(13px + (18 - 13) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        font-size: calc(11px + (18 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .pagination-active{
        border-radius: calc(9px + (13 - 9) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(5px + (6 - 5) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(12px + (16 - 12) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
}