.case-hor-container{height: 100vh; display: flex; align-items: center; overflow-x:clip ;}
.case-study-box{display: block;transform: translateY(0);transition: all 0.2s ease-in;}
.case-study-box:hover{transform: translateY(-10px);}
.cs-img-box {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.cs-logo-box {width: 194px;height: 201px;background: var(--kal-white); z-index: 1;}
.cs-logo {width: 122px;height: 122px;}
.cs-content-box {max-width: 406px;padding: 32px 30px 26px;z-index: 1;}
.cs-content-box h2 {font-size: 30px;font-weight: 600;letter-spacing: -0.01em;margin-bottom: 28px;line-height: 1; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;}

.case-study-item { padding: 0 46px; display: inline-block; width: auto;}
.case-study-item:first-child {padding-left: 0;}
.case-study-item:last-child {padding-right: 0;}
.case-study-box {width: 708px; white-space: normal; max-width: 100%;}

.case-study-item:nth-child(4n+1) .cs-content-box{background-color: var(--kal-blue-light);color: var(--kal-black);}
.case-study-item:nth-child(4n+2) .cs-content-box{background-color: var(--kal-violet);color: var(--kal-black);}
.case-study-item:nth-child(4n+3) .cs-content-box{background-color: var(--kal-green);color: var(--kal-black);}
.case-study-item:nth-child(4n+4) .cs-content-box{background-color: var(--kal-blue);color: var(--kal-white);}
.case-study-item:nth-child(4n+1) .link::after, .case-study-item:nth-child(4n+2) .link::after, .case-study-item:nth-child(4n+3) .link::after{--icon-filter: none;} 
.case-study-item:nth-child(4n+4) .link::after{--icon-filter: brightness(0) invert(1);}

.case-hor-section-width{width: 100%; height: 1px;}
.case-hor-section-parent{width:100%; display: inline-block;}
.case-hor-section{white-space: nowrap;display: inline-block;}
/* ========================================== 
! Large devices (desktops, less than 1400px)
=========================================== */
@media (max-width:1399.98px){
    .case-study-item{padding: 0 15px;}
    .case-study-box {width: 606px;min-height: 342px;}
    .cs-logo-box {width: 166px;height: 172px;}
    .cs-content-box {max-width: 348px;padding: 20px 25px;}
    .cs-content-box h2 {margin-bottom: 15px;}
}
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px){ 
    .case-study-item{padding: 0;max-width: 606px;}
}
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px){
    .case-study-box {min-height: 308px;}
    .cs-logo-box {width: 146px;height: 156px;}
    .cs-content-box {max-width: 313px;padding: 18px 22px;}
    .cs-content-box h2 {font-size: 25px; margin-bottom: 18px;}
}
/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px){
    .case-study-item {width: calc(100% - 40px);max-width: 312px;}
    .cs-content-box {max-width: 100%;padding: 18px 24px;}  
}
/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px){}
/* ======================================================
! Extra small devices (portrait phones, less than 370px)
====================================================== */
@media (max-width:369.98px){}