.ws-outer {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1300px; margin: 0 auto; padding: 20px 20px 20px 0px;}
.ws-item {position: relative; width: 300px; height: 200px; overflow: hidden; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.ws-item img {width: 100%; height: 100%; object-fit: cover; display: block;}
.ws-item:hover {transform: scale(1.03); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); cursor: pointer;}
.ws-item::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.3s ease;}
.ws-item:hover::after {opacity: 1;}
   
@media (max-width: 1200px) {
    .ws-outer {grid-template-columns: repeat(3, 1fr);}
     }

@media (max-width: 992px) {
     .ws-outer {grid-template-columns: repeat(2, 1fr);}
     }

@media (max-width: 768px) {
    .ws-outer {grid-template-columns: 1fr;}
    .ws-item {width: 100%; max-width: 300px; margin: 0 auto;}
        }