.section3 {
       overflow: hidden;
       position: relative;
   }


   .box3 {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       grid-gap: 40px 20px;
   }

   .item3 {
       width: 100%;
   }

   .item3:nth-child(1) {
       grid-column: 1 / 3;
   }

   .img3 {
       position: relative;
       width: 100%;
   }

   .item3 * {
       transition: all 0.5s ease;
   }

   .img3::after {
       transition: all 0.5s ease;
       content: "";
       display: block;
       width: 100%;
       height: 100%;
       background: linear-gradient(250deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
       position: absolute;
       left: 0;
       top: 0;
       z-index: 3;
       opacity: 0;
   }

   .item3:hover .img3::after {
       opacity: 1;
   }

   .img3 img {
       width: 100%;
   }

   .img3 .img1 {
       position: relative;
       z-index: 1;
   }

   .img3 .img2 {
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       z-index: 2;
       display: none;
   }

   .item3:hover .img3 .img2 {
       display: block;
   }

   .img3 span {
       display: block;
       width: 120px;
       height: 40px;
       border-radius: 50px;
       font-size: 14px;
       color: #fff;
       background: var(--color2);
       display: flex;
       align-items: center;
       justify-content: center;
       position: absolute;
       z-index: 4;
       bottom: 30px;
       left: calc(50% - 60px);
       opacity: 0;
   }

   .item3:hover .img3 span {
       opacity: 1;
   }


   .text3 h1 {
       font-size: 20px;
       line-height: 1;
       color: #000000;
       margin: 25px 0;
       overflow: hidden;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
   }

   .text3 span {
       display: flex;
       grid-gap: 10px;
       flex-wrap: wrap;
       overflow: hidden;
       height: 38px;
   }

   .text3 span p {
       display: block;
       padding: 0 20px;
       height: 38px;
       border: 1px solid rgba(153, 124, 101, 0.5);
       font-size: 16px;
       line-height: 1;
       color: rgba(153, 124, 101, 0.5);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .box3More {
       transition: all 0.5s ease;
       margin: 0 auto;
       margin-top: 40px;
       font-size: 20px;
       line-height: 1;
       color: var(--color1);
       width: 460px;
       height: 80px;
       border: 1px solid var(--color1);
       background: var(--white);
       border-radius: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .box3More:hover {
       border: 1px solid var(--color2);
       background: var(--color2);
       color: #fff;
   }

   @media (max-width: 1540px) {
       .box3More {
           width: 360px;
           height: 60px;
       }
   }

   @media (max-width: 1200px) {
       .box3 {
           grid-template-columns: repeat(4, 1fr);
           grid-gap: 30px 10px;
       }

       .img3 span {
           width: 100px;
           height: 30px;
           left: calc(50% - 50px);
       }

       .text3 h1 {
           font-size: 18px;
           margin: 15px 0;
       }

       .text3 span {
           height: 30px;
       }

       .text3 span p {
           width: auto;
           padding: 0 15px;
           height: 30px;
           font-size: 14px;
       }

       .box3More {
           width: 210px;
           height: 45px;
           font-size: 16px;
       }
   }

   @media (max-width: 800px) {


       .img3 span {
           bottom: 20px;
       }
   }

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

       .box3More {
           margin-top: 30px;
       }

   }

   @media (max-width: 460px) {
       .text3 h1 {
           font-size: 16px;
       }

       .text3 span p {
           font-size: 12px;
       }
   }