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

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

.cases-headline{
    display: flex;
    flex-direction: row;
    width: max-content;
    margin-top: 159px;
}

.cases-headline-text{
    display: flex;
    flex-direction: column;
    width: 760px;
}

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

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

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

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

.cases-headline-img{
    position: relative;
    top: -20px;
    left: 28px;
    width: 715px;
}

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

.result-our-work{
    display: flex;
    flex-direction: column;
    width: max-content;
    margin-top: 180px;
}

.result-our-work-headline{
    width: max-content;
    margin-bottom: 40px;
}

#result-our-work-tabs{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
    width: 1207px;
}

.result-our-work-tab{
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;

    background: #F6F6F6;
    border-radius: 30px;
    padding: 10px 25px;
    cursor: pointer;
    color: #333333;
    font-size: 16px;
    line-height: 19px;
    transition: 0.4s;
}

.result-our-work-tab:hover{
    transition: 0.4s;
    background: #916BEF;
    color: #F6F6F6;
}

.cases-active{
    color: #FFFFFF;
    background: #B89BFF;
}

.case-div {
    width: 660px;
    height: 500px;
    background: #FFFFFF;    
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding-left: 40px;
    padding-bottom: 40px;
    background-size: cover;
    background-repeat: no-repeat;
}

.block-cases a{
    text-decoration: none;
}

.case-div-a{
    display: none;
}

.up-case{
    position: relative;
    bottom: 40px;
}
  
.show {
    display: block;
}

.block-cases{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 1360px;
    margin-top: 80px;
    gap: 40px;
}

.block-cases .case-div .case-text-space{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
}

.block-cases .case-div .col-1{
    max-width: 390px;
}

.block-cases .case-div .col-2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
    width: 296px;
    font-size: 16px;
    line-height: 19px;
    margin-top: 20px;
}

.block-cases .case-div .col-2 .hashtag-text{
    padding: 10px 25px;
    background: #F6F6F6;
    border-radius: 30px;
}

.block-cases .purple-case-div .col-2 .hashtag-text{
    background: #CCB7FF;
}

.block-cases .black-case-div{
    background: #000000;
    color: #FFFFFF;
}

.block-cases .black-case-div .col-2 .hashtag-text{
    background: #474747;
}

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

.cases-page .popular-services{
    margin-top: 160px;
}

.cases-page .request-block{
    margin-top: 193px;
}

.cases-page .articles-block{
    max-width: 1366px;
    margin-top: 200px;
    margin-bottom: 200px;
}

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

@media(max-width: 1919px){
    .cases-headline{
        margin-top: calc(113px + (159 - 113) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .cases-headline-text{
        width: calc(496px + (760 - 496) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .cases-headline-text .col-1 img{
        width: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .cases-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(29px + (39 - 29) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .cases-headline-img{
        top: calc(-16px + (-20 - -16) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        left: calc(21px + (28 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(472px + (715 - 472) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ------------------------ */
    
    .result-our-work{
        margin-top: calc(125px + (180 - 125) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .result-our-work-headline{
        margin-bottom: calc(30px + (40 - 30) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    #result-our-work-tabs{
        row-gap: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        column-gap: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(848px + (1207 - 848) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .result-our-work-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) ));
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(14px + (19 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .case-div {
        width: calc(469px + (660 - 469) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(355px + (500 - 355) * ( (100vw - 1366px) / ( 1920 - 1366) )); 
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding-left: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding-bottom: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .block-cases{
        width: calc(968px + (1360 - 968) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(64px + (80 - 64) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        gap: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .block-cases .case-div .col-1{
        max-width: calc(245px + (390 - 245) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .block-cases .case-div .col-2{
        row-gap: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        column-gap: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(210px + (296 - 210) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(14px + (19 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .block-cases .case-div .col-2 .hashtag-text{
        padding: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(18px + (25 - 18) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .up-case{
        bottom: calc(36px + (40 - 36) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ----------------------- */
    
    .cases-page .popular-services{
        margin-top: calc(132px + (160 - 132) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .cases-page .request-block{
        margin-top: calc(138px + (193 - 138) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .cases-page .articles-block{
        margin-top: calc(153px + (200 - 153) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(126px + (200 - 126) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        max-width: calc(967px + (1366 - 967) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
}