.case-list{display:grid;gap:25px;&.case-grid{grid-template-columns:repeat(12,1fr);&.grid-col-one .single_case{grid-column:span 12}&.grid-col-two .single_case{grid-column:span 6}&.grid-col-three .single_case{grid-column:span 4}&.grid-col-four .single_case{grid-column:span 3}@media (min-width:1024px) and (max-width:1300px){&.grid-col-md-two .single_case{grid-column:span 6}&.grid-col-md-three .single_case{grid-column:span 4}&.grid-col-md-four .single_case{grid-column:span 3}}@media (min-width:550px) and (max-width:1024px){&.grid-col-four .single_case,&.grid-col-three .single_case,&.grid-col-two .single_case{grid-column:span 6}}}&.case-masonry{grid-template-columns:repeat(15,1fr);.single_case{grid-column:span 4;&:nth-child(3n):not(:nth-child(6n)),&:nth-child(3n+1):not(:nth-child(6n+1)){grid-column:span 7}}@media (min-width:1024px) and (max-width:1300px){.single_case{grid-column:span 6!important;&:nth-child(2n):not(:nth-child(4n)),&:nth-child(odd):not(:nth-child(4n+1)){grid-column:span 9!important}}}@media (min-width:550px) and (max-width:1024px){grid-template-columns:repeat(2,1fr);.single_case{grid-column:span 1!important;&:nth-child(3n){grid-column:span 2!important}}}}@media (max-width:550px){grid-template-columns:1fr!important;.single_case:nth-child(n){grid-column:span 1!important}}.case-card{background-size:cover;border-radius:25px;box-shadow:0 2px 10px -2px rgba(0,0,0,.2);display:block;height:550px;padding:25px 30px;text-decoration:none;transition:.3s ease-out;width:100%;&:hover{transform:scale(.95)}&:active{transform:scale(.9)}&.txt--light>*{color:#1b251a}&.txt--dark>*{color:#fff}.case-client{font-weight:500;margin-bottom:5px}.case-card__info{position:relative;z-index:2;.case-categories,.case-explore{position:absolute;-webkit-transition:transform .35s ease-in-out,opacity .35s ease-in-out;transition:transform .35s ease-in-out,opacity .35s ease-in-out}.case-categories{opacity:1;transform:translateY(0)}.case-explore{opacity:0;transform:translateY(100%)}}&:hover>.case-card__info .case-categories{opacity:0;transform:translateY(-100%)}&:hover>.case-card__info .case-explore{opacity:1;transform:translateY(0)}@media (min-width:1024px) and (max-width:1300px){height:500px}@media (min-width:550px) and (max-width:1024px){height:400px}@media (max-width:550px){height:350px}}}