@import '../constants.css';
            .case-grid {
                display: grid;
                gap: 30px;
                grid-template-columns: repeat(auto-fill, minmax(580px, 1fr));
                grid-template-rows: minmax(100px, auto);
                margin: 0 40px;
                grid-auto-flow: dense;
                position: relative;
            }
            .item{
               cursor: pointer;
            }
            .case-grid .item .img{
                margin-bottom: 40px;
            }
            .case-grid .item:nth-child(1) .img{
                /* height: 400px; */
            }
            .case-grid .item:nth-child(2) .img{
                /* height: 700px; */
            }
            .case-grid .item:nth-child(3) .img{
                /* height: 580px; */
            }
            .case-grid .item:nth-child(4) .img{
                
            }
            .case-grid .item:nth-child(5) .img{
                /* height: 435px; */
            }
            .case-grid .item:nth-child(1){
                grid-column: span 1;
            }
            .case-grid .item:nth-child(2){
                grid-row: span 2;
            }
            .case-grid .item:nth-child(3){
                grid-column: span 1;
                grid-row: span 1;
            }
            .case-grid .item:nth-child(4){
                grid-column: span 1;
                grid-row: span 2;
                position: absolute;
                top:42.5%;
                right:10px;     
            }
            .case-grid .item:nth-child(5){
                grid-column: span 2;
            }
            .case .text{
                position: relative;
            }
            .case .text{

            }
            .case .text svg{
                position: absolute;
                top:0;
                right:10px;
                opacity: 0;
                color: var(--secondary);
            }
            .case .item:hover .text svg{
                opacity: 1;
            }
            .case .text span{
                color: var(--secondary);
                font-family: var(--text);
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 140%; /* 25.2px */
                text-transform: uppercase;
            }
            .case .text h4{
                margin: 12px 0 24px 0;
                color: var(--tertiary, #211951);

                /* Heading/36px */
                font-family: var(--heading);
                font-size: 36px;
                font-weight: 600;
                line-height: 120%; /* 43.2px */
            }   
            .case .text p{
                color: #4F4F4F;
                margin-bottom: 0; 
                /* Heading/H4 */
                font-size: 20px;
                font-weight: 400;
                line-height: 140%; /* 33.6px */
            }
            @media screen and (max-width: 1320px) {  
                .case-grid .item:nth-child(4) {
                    width: 47%;
                }
            }
            @media screen and (max-width: 1280px) {  
                .case-grid .item:nth-child(4) {
                    width: 46%;
                }
            }
            @media screen and (max-width: 1230px) {  
                .case-grid .item:nth-child(4) {
                    width: 44%;
                }
            }
            @media screen and (max-width: 1190px) {  
                .case-grid .item:nth-child(4) {
                    width: 41%;
                    top: 36.5%;
                }
            }
            @media screen and (max-width: 1120px) {  
                .case-grid .item:nth-child(4) {
                    width: 38%;
                }
            }
            @media screen and (max-width: 1080px) {  
                .case-grid .item:nth-child(4) {
                    width: 35%;
                    top:30%;
                }
            }
            @media screen and (max-width: 1040px) {  
                .case-grid .item:nth-child(4) {
                    width: 30%;
                }
            }
            @media screen and (max-width: 990px) {            
                .case-grid {
                grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
                grid-template-rows: minmax(auto, auto);
                }
                .case-grid .item:nth-child(4){
                    position: relative;
                    width: 100%;
                    top: 0;
                    left: 0;
                    right: auto;
                }
                .case-grid .item{
                    grid-column: unset!important;
                    grid-row: unset!important;
                    
                }
                
            }