.portfolio-grid {
     margin-left: -10px;
     margin-right: -10px;
     overflow: hidden;
 }

 .portfolio-grid::after {
     content: "";
     display: block;
     clear: both;
 }

 .grid-sizer {
     width: calc((100% - 40px) / 3);
     float: left;
 }

 .portfolio-item {
     width: calc((100% - 40px) / 3);
     padding-left: 10px;
     padding-right: 10px;
     margin-bottom: 30px;
     float: left;
     box-sizing: border-box;
 }

 .portfolio-card {
     display: block;
 }

 .portfolio-item img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 2px;
     object-fit: cover;
     cursor: pointer;
     transition: transform 0.3s ease;
 }

 .portfolio-caption {
     padding-top: 12px;
 }

 .portfolio-title {
     font-size: 17px;
     font-weight: 600;
     margin: 0 0 4px;
     color: #333;
     text-transform: capitalize;
 }

 .portfolio-note {
     font-size: 14px;
     color: #6c757d;
     margin: 0;
 }

 .portfolio-empty {
     max-width: 720px;
     margin: 0 auto;
     padding: 48px 24px;
     border: 1px solid rgba(176, 141, 87, 0.2);
     background: #f5f3f0;
     border-radius: 4px;
 }


 .portfolio-item p {
     font-size: 15px;
     margin-top: 8px;
     margin-bottom: 0;
 }

 @media (max-width: 1199px) and (min-width: 769px) {
     .grid-sizer,
     .portfolio-item {
         width: calc((100% - 20px) / 2);
     }
 }

 @media (max-width: 768px) {
     .portfolio-grid {
         margin-left: 0;
         margin-right: 0;
     }

     .grid-sizer,
     .portfolio-item {
         width: 100% !important;
         float: none !important;
         padding-left: 0;
         padding-right: 0;
         margin-bottom: 18px;
         box-sizing: border-box;
     }

     .portfolio-item img {
         border-radius: 10px;
         width: 100%;
         height: auto;
     }

     .portfolio-item p {
         font-size: 15px;
         margin-top: 8px;
         margin-bottom: 0;
     }
 }