@media(min-width:1000px)
{
    .box {
        position: relative;
        width:448px;
        height: 454.02px;
        border-radius: 25px;
         margin: 0 auto;
      }
    
      .box-contents {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url('../images/aboutpng.png') no-repeat 0 0;
        border-radius: 200px;
        transition: .5s ease;
      }
      .hover-point {
        position: absolute;
        z-index: 2;
        width: calc(100% / 3);
        height: calc(100% / 3);
      }
      .hover-point:nth-child(1) {
        top: 0;
        left: 0;
      }
      .hover-point:nth-child(2) {
        top: 0;
        left: calc(100% / 3);
      }
      .hover-point:nth-child(3) {
        top: 0;
        right: 0;
      }
      .hover-point:nth-child(4) {
        top: calc(100% / 3);
        left: 0;
      }
      .hover-point:nth-child(5) {
        top: calc(100% / 3);
        right: 0;
      }
      .hover-point:nth-child(6) {
        bottom: 0;
        left: 0;
      }
      .hover-point:nth-child(7) {
        bottom: 0;
        left: calc(100% / 3);
      }
      .hover-point:nth-child(8) {
        bottom: 0;
        right: 0;
      }
      .hover-point:nth-child(1):hover ~ .box-contents {
      
        transform-origin: right top;
        transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
      }
      .hover-point:nth-child(2):hover ~ .box-contents {
  
        transform-origin: center top;
        transform: perspective(1000px) rotateX(10deg);
      }
      .hover-point:nth-child(3):hover ~ .box-contents {
        
        transform-origin: left top;
        transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(-2deg);
      }
      .hover-point:nth-child(4):hover ~ .box-contents {
        
        transform-origin: left center;
        transform: perspective(1000px) rotateY(-10deg);
      }
      .hover-point:nth-child(5):hover ~ .box-contents {
        
        transform-origin: right center;
        transform: perspective(1000px) rotateY(10deg);
      }
      .hover-point:nth-child(6):hover ~ .box-contents {
        
        transform-origin: right bottom;
        transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(-2deg);
      }
      .hover-point:nth-child(7):hover ~ .box-contents {
       
        transform-origin: center bottom;
        transform: perspective(1000px) rotateX(-10deg);
      }
      .hover-point:nth-child(8):hover ~ .box-contents {
        
        transform-origin: left bottom;
        transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(2deg);
      }
      .link {text-align: right;}
}

@media (max-width:1000px)
  {
    .box {
      position: relative;
  
      width:100%;
  height: 296.02px;
 
  border-radius: 25px;
  
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .box-contents {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left:0;
      background: url('../images/aboutpng.png') no-repeat center;
      background-size: contain;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      border-radius: 200px;
      
      transition: .5s ease;
    }
    .hover-point {
      position: absolute;
      z-index: 2;
      width: calc(100% / 3);
      height: calc(100% / 3);
    }
    .hover-point:nth-child(1) {
      top: 0;
      left: 0;
    }
    .hover-point:nth-child(2) {
      top: 0;
      left: calc(100% / 3);
    }
    .hover-point:nth-child(3) {
      top: 0;
      right: 0;
    }
    .hover-point:nth-child(4) {
      top: calc(100% / 3);
      left: 0;
    }
    .hover-point:nth-child(5) {
      top: calc(100% / 3);
      right: 0;
    }
    .hover-point:nth-child(6) {
      bottom: 0;
      left: 0;
    }
    .hover-point:nth-child(7) {
      bottom: 0;
      left: calc(100% / 3);
    }
    .hover-point:nth-child(8) {
      bottom: 0;
      right: 0;
    }
    .hover-point:nth-child(1):hover ~ .box-contents {
   
      transform-origin: right top;
      transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
    }
    .hover-point:nth-child(2):hover ~ .box-contents {
     
      transform-origin: center top;
      transform: perspective(1000px) rotateX(10deg);
    }
    .hover-point:nth-child(3):hover ~ .box-contents {
    
      transform-origin: left top;
      transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(-2deg);
    }
    .hover-point:nth-child(4):hover ~ .box-contents {
      
      transform-origin: left center;
      transform: perspective(1000px) rotateY(-10deg);
    }
    .hover-point:nth-child(5):hover ~ .box-contents {
     
      transform-origin: right center;
      transform: perspective(1000px) rotateY(10deg);
    }
    .hover-point:nth-child(6):hover ~ .box-contents {
    
      transform-origin: right bottom;
      transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(-2deg);
    }
    .hover-point:nth-child(7):hover ~ .box-contents {
      
      transform-origin: center bottom;
      transform: perspective(1000px) rotateX(-10deg);
    }
    .hover-point:nth-child(8):hover ~ .box-contents {
      transform-origin: left bottom;
      transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(2deg);
    }
    .link {text-align: right;}
  
  }